css 文本气泡样式

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;
}
页面效果：

2、复杂气泡

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

 

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;
}
页面效果：