纯CSS开发的气泡式提示框-----------只需要一个class

来源：互联网发布：泛型 java 编辑：程序博客网时间：2024/06/18 01:57

其实原理很简单,就是befor是一个小三角有颜色的

after是一个小三角没颜色的

用after去覆盖befor即可

话不多说直接上代码

1.这是三角在上面的

.tipbox{display:block;position: absolute;bottom: -36px;right: 0px; width: 66px;border-radius: 3px;line-height: 28px;text-align: center;font-size: 12px; color: #999; height: 28px;  border: 1px solid #eee;  background-color: #FFF;}.tipbox:before, .tipbox:after{    content: "";  display: block;  border-width: 8px;  position: absolute;  bottom: 29px;    left: 39px;    border-style: dashed dashed dashed dashed;    border-color: transparent transparent #eee transparent;    font-size: 0;    line-height: 0; }.tipbox:after{    bottom: 28px;    border-color: transparent transparent #FFF transparent;}

2.三角在旁边的

HTML结构同前面一样：

1
2
3
4
5
6
<div class="tag">
 <div class="arrow">
     <em></em><span></span>
    </div>
    CSS气泡框实现
</div>

矩形框CSS样式稍微改动一下：

1
.tag{ width:300px; height:100px;position:relative; background-color:#09F;}

重新定位一下三角箭头：

1
.arrow{ position:absolute; width:70px; height:60px; left:-70px; bottom:10px;}

元素相邻的两边border-style值设为solid（显示），另两边设为transparent（不会显示）

1
.arrow *{ display:block; position:absolute; border-style:dashed solid solid dashed; font-size:0; line-height:0; }

首先模拟一个直角三角形，把一个元素的相邻两边color设为相同的值，另外两边颜色设为透明，即可得到一个直角：

1
.arrow em{border-color:transparent #09F #09F transparent; border-width:30px 35px;}

把两个直角三角形重叠在一起就可以得到一个不规则三角形

1
.arrow span{ border-width:20px 35px;border-color:transparent #FFF #FFF transparent; bottom:0;}

至此，不规则三角箭头的气泡框效果已经实现。

3三角在下面的

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .tag{            width:300px;            height:100px;            border:5px solid #09F;            position:relative;            background-color:#FFF;        }        .tag:before,.tag:after{            content:"";display:block;            border-width:20px;            position:absolute; bottom:-40px;            left:100px;            border-style:solid dashed dashed;            border-color:#09F transparent transparent;            font-size:0;            line-height:0;        }        .tag:after{            bottom:-33px;            border-color:#FFF transparent transparent;        }    </style></head><body><div class="tip-bubble">这是我的气泡</div></body></html>

最终效果如下：

0 0