纯CSS气泡框实现方法探究
可以先看看这个,然后我们总结一个实现小三角方法
先看html
<div class="tag">
<i class="tri tri-top"></i>
<i class="tri tri-top-trans"></i>
CSS气泡框实现
</div>
css:
.tag{ width:300px; height:100px; border:5px solid #09F; position:relative;}
.tag .tri{position: absolute;font-size: 0;line-height: 0;border:15px dashed transparent;}
.tag .tri-top{border-top:15px solid #09f;bottom:-35px;left:10px;}
.tag .tri-top-trans{border-top:15px solid #fff;bottom:-27px;left:10px;}
效果也可以实现上面的镂空的css效果