1、简易气泡

eg:

html部分:
<div class="bubble">我是气泡文本</div>
css部分:
//小三角
.bubble:before{
position: absolute;
top: 80px;
left: 30px;
content: '';
border: 15px solid transparent;
border-top-color: cadetblue;
}
.bubble{
position: relative;
height: 80px;
width: 200px;
border: 2px solid cadetblue;
}
页面效果:

css 文本气泡样式-LMLPHP

2、复杂气泡

简述:两个小三角的叠用,用与背景色相同的小三角挡住另一小三角的横线部分。如图:

css 文本气泡样式-LMLPHP

html部分:
<div class="wrap">
<span></span>
<span></span>
<div class="bub">我是气泡文本</div>
</div>
css部分:
.wrap span:first-child{
position: absolute;
bottom:-30px;
left: 20px;
border: 15px solid transparent;
border-top-color: cadetblue;
}
.wrap span:nth-child(2){
position: absolute;
bottom:-26px;
left: 20px;
border: 15px solid transparent;
border-top-color: #ffffff;
}
.bub{
position: relative;
height: 80px;
width: 200px;
border: 2px solid cadetblue;
z-index: -1;
}
页面效果:

css 文本气泡样式-LMLPHP

05-11 13:49