css3制作小三角和镂空样式的小三角

纯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效果