纯CSS画气泡对话框

 首先要明白气泡框的制作其实是 矩形框+带方向的三角形，所以气泡框样式的关键就是三角形

那画三角形得先了解border这个css属性，先来几张图看下

# test{width:50px; height:50px; border-width:50px; border-style:solid; border-color:#09F #990 #933 #0C9;}

#test{ width:0; height:0; border-width:75px; border-style:solid; border-color:#09F #990 #933 #0C9; font-size:0; line-height:0;}

设置line-height和font-size是为了兼容ie6

#test{ width:0; height:0; border-width:75px; border-style:solid dashed dashed; border-color:#09F transparent transparent; font-size:0; line-height:0;}

border-style对应的边也要设置dashed（兼容ie,不然其他三边会是黑色）

看到这里相信很多小伙伴都已经明白了三角形制作的原理了。

具体原理就是通过将两个三角形叠加，外层的三角形border颜色和矩形框一致，里面用来遮挡的三角形border颜色和矩形框背景色一致，然后通过定位露出外层三角形的边框 再定位到矩形框所需位置即可，具体的实现方法有两种

第一种：多个html元素

                    <div class="dialog-box">
                      <span class="bot"></span>
                      <span class="top"></span>
                    </div>

      .dialog-box {
        position: relative;
        span {
          width:0; 
          height:0; 
          font-size:0; 
          overflow:hidden; 
          position:absolute;
          &.bot{
            border-width: 15px; 
            border-style: solid dashed dashed; 
            border-color: transparent transparent #F9743A transparent; 
            left: 15px; 
            top: -29px;
          }
          &.top{
            border-width:13px; 
            border-style:solid dashed dashed; 
            border-color:transparent transparent #fff transparent; 
            left:17px; 
            top:-25px;
          }
        }
      }

第二种:CSS3 before、after伪元素

<div class="wrap"></div>

        .wrap::before,
        .wrap::after{
            position: absolute;
            content: '';
            width: 0;
            height: 0;
            border-width: 40px 20px;
            border-style: solid;
            border-color: #3377aa transparent transparent;
            bottom: -80px;
            left: 50%;
            margin-left: -20px;
        }
        .wrap::after{
            border-color: #fff transparent transparent;
            bottom: -60px;
        }