纯CSS画气泡对话框

拼搏现实的明天。 2022-04-05 08:14 327阅读 0赞

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0NTEwNDU1_size_16_color_FFFFFF_t_70][]

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

![20181211162207445.png][]

设置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;}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0NTEwNDU1_size_16_color_FFFFFF_t_70 1][]

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

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

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

第一种：多个html元素

.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伪元素

.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;
            }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0NTEwNDU1_size_16_color_FFFFFF_t_70]: /images/20220405/c37fc91b4bf343ceb5f1c3f862a74a5c.png
[20181211162207445.png]: /images/20220405/0a39081edd284c66b03a9bfa7f1351ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0NTEwNDU1_size_16_color_FFFFFF_t_70 1]: /images/20220405/053b4e5b648b4a6fb12f3c05c943546a.png