在使用第三方框架bootstrap的时候，本以为其是图片实现的小箭头，后来使用开发工具查看是用CSS来实现的，现记录如下：

之前都没仔细去观注过其原理，都是拿来使用，在实现小箭头之前需要了解下CSS的before跟after伪类的用法，这个链接有详细说明http://www.webhek.com/understanding-pseudo-element-before-and-after

理解完上面伪类的用法后，下面进入主题，直接贴上代码，

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>border test page</title>

     <style>

         body{background: #fff;}

         .borderbottom{

             width:0px;

             height: 0px;

             border-width: 8px;

             border-style: solid;

             border-color: transparent transparent #333 transparent;

             position: absolute;

             top: 10px;

         }

         .borderballoon{

             width: 200px;

             height: 80px;

             background: lightgreen;

             border-radius: 5px;

             position: relative;

             top: 30px;

         }

         .borderballoon:after{

             content: "";

             position: absolute;

             border-style: solid;

             border-color: lightgreen transparent transparent;

             border-width: 10px;

             bottom: -20px;

             right:40px;

         }

         .flatballoon{

             width: 200px;

             height: 100px;

             border: 1px solid #ccc;

             border-radius: 5px;

             position: relative;

             top: 60px

         }

         .flatballoon:after{

             content: "";

             position: absolute;

             border-style: solid;

             border-color: #ccc transparent transparent;

             border-width: 10px;

             bottom: -20px;

             right:40px;

         }

         .flatballoon:before{

             content: "";

             position: absolute;

             border-style: solid;

             border-color: white transparent transparent;

             border-width: 10px;

             bottom: -19px;

             right:40px;

             z-index: 9;

         }

     </style>

 </head>

 <body>

         <div class="borderbottom"></div>

         <div class="borderballoon"></div>

         <div class="flatballoon"></div>

 </body>

 </html>

主要是定位结合伪类实现其效果。

CSS纯样式实现箭头、对话框等形状的更多相关文章

  1. css纯样式导航

    <style>.dropdown {    position: relative;    display: inline-block;} .dropdown-content {    di ...

  2. 纯CSS实现各类气球泡泡对话框效果

    原文 纯CSS实现各类气球泡泡对话框效果 一.关于纯CSS实现气泡对话框 首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一 ...

  3. 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

  4. 纯CSS菜单样式，及其Shadow DOM，Json接口 实现

    先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 完整项目github链接:https://github.com/git-Code-Shelf/M ...

  5. html css鼠标样式，鼠标形状

    css鼠标手型cursor中hand与pointer Example:CSS鼠标手型效果 <a href="#" style="cursor:hand"& ...

  6. css 字体样式设置大全

    css样式大全(整理版)   字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 { ...

  7. css初始化样式代码

    为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...

  8. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  9. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

随机推荐

  1. 解决tomcat was unable to start within问题

    这个问题可能大家都熟悉,以前碰到这个问题,重新启动一次eclipse就好了,随着我的一个项目的增大,我发现这种情况越来越多,到底是怎么回事? 出现这个情况的原因有两个,要么是你的数据库连接connec ...

  2. Spring MVC 配置文件dispatcher-servlet.xml 文件详解

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  3. 重构第24天 分解复杂的判断(Remove Arrowhead Antipattern)

    理解: 当你的代码中有很深的嵌套条件时,花括号就会在代码中形成一个长长的箭头.我们经常在不同的代码中看到这种情况,并且这种情况也会扰乱代码的可读性. 如下代码所示,HasAccess方法里面包含一些嵌 ...

  4. 用SQL语句修复SQL Server数据库

    使用数据库的过程中,由于断电或其他原因,有可能导致数据库出现一些小错误,比如检索某些表特别慢,查询不到符合条件的数据等. 出现这些情况的原因,往往是因为数据库有些损坏,或索引不完整. 在ACCESS中 ...

  5. SqlServer一张表数据导入另一张表，收藏使用，工作中更新数据错误很有用

    sql一张表数据导入另一张表   1.如果2张表的字段一致,并且希望插入全部数据,可以用这种方法:   INSERT INTO 目标表 SELECT * FROM 来源表;   2.比如要将 arti ...

  6. 从零开始学习Linux（cp 命令）

    功能: 复制文件或目录说明: cp指令用于复制文件或目录,如同时指定两个以上的文件或目录,且最后的目的地是一个已经存在的目录,则它会把前面指定的所有文件或目录复制到此目录中.若同时指定多个文件或目录, ...

  7. Linux Shell系列教程之（十六） Shell输入输出重定向

    本文是Linux Shell系列教程的第(十六)篇,更多Linux Shell教程请看:Linux Shell系列教程 Shell中的输出和输入的重定向是在使用中经常用到的一个功能,非常实用,今天就为 ...

  8. ASP.NET WebAPI 07 路由

    WebAPI的中路由设计与ASP.NET相似,但又是独立的一套框架. HttpRoute HttpRoute主要提供了路由模板,用于匹配url,生成virtualPath. public interf ...

  9. JavaScript 中有关数组对象的方法

    JS 处理数组多种方法 js 中的数据类型分为两大类:原始类型和对象类型. 原始类型包括:数值.字符串.布尔值.null.undefined 对象类型包括:对象即是属性的集合,当然这里又两个特殊的对象 ...

  10. [原创]winform_PC宴会图片抽奖/文字抽奖

    14年6月 好友结婚 14年4月左右知道他们婚礼由迎宾照抽奖的环节 问我有没有可以用的抽奖软件 我网上找了一会儿,就放弃了,自己做一个更快不是? 14年6月,PC宴会图片抽奖软件成功使用 --- 操作 ...