在使用第三方框架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. java 版的复利计算器(张俊毅 周修文)

    (带有本金的选项卡的意思就是计算你在知道利率.年限和本息的情况下计算本金) 在利率的输入中能限制小数点的输入并且输入字母会被直接去除 每一个选项卡都有复利和单利的计算,并且在你计算之后会立即更新在下面 ...

  2. URL 字符编码

    URL 编码会将字符转换为可通过因特网传输的格式. URL - 统一资源定位器 Web 浏览器通过 URL 从 web 服务器请求页面. URL 是网页的地址,比如http://www.cnblogs ...

  3. 【C#进阶系列】08 方法

    实例构造与引用类型 之前的章节其实已经写过了引用类型的构造过程: 首先当然是,在堆中,为引用类型的实例对象分配内存,然后初始化对象的附加字段(即类型对象指针和同步块索引). 这个时候为对象分配的内存都 ...

  4. 小白学Linux（三）--文件系统基本结构

    Linux文件系统是一个倒立的单根树状结构,文件名称严格区分大小写(windows系统则是对大小写不明感的).路径用“/”分隔,跟windows的“\”不同. 这里我画了一张一般Linux系统的正常目 ...

  5. 【Qt】2.4 做一个“猜数字”的游戏

    使用对话框和Qt设计师来实现一个相当简单的小游戏.同时将通过这个程序来看布局的隐藏和显示是如何来影响窗口界面的变化的. 新建一个Qt项目,把Qt Creator默认给的mainwindow.h.mai ...

  6. sessionId在fragment里无法保存的问题

    fragment页面需要验证用户是否登录.若没登陆调用登录页面,后返回fragment. 这个问题解决 sessionId = SharePreferenceUtils.getSessionId(); ...

  7. 【JavaEE】Hibernate继承映射，不用多态查询只查父表的方法

    几个月前,我在博问里面发了一个问题:http://q.cnblogs.com/q/64900/,但是一直没有找到好的答案,关闭问题以后才自己解决了,在这里分享一下. 首先我重复一下场景,博问里面举的动 ...

  8. apple store链接格式文档

    备份一下: The app on Appstore has specific URL format http://itunes.apple.com/[country-code]/app/[app-na ...

  9. JS控制HTML元素的显示和隐藏

    JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...

  10. 从web移动端布局到react native布局

    在web移动端通常会有这样的需求,实现上中下三栏布局(上下导航栏位置固定,中间部分内容超出可滚动),如下图所示: 实现方法如下: HTML结构: <div class='container'&g ...