用纯css模拟小气泡三角

 

     以前遇到textarea上面有小三角气泡，总是把小三角气泡单独切下来，然后再绝对定位上去。今天，切页面我就换了一个方法，用纯css上！

    其实原理很简单:就是让两个小三角叠起来，上面的小三角往一侧错一下位，就刚好露出下面小三角的边，为此上下三角的颜色是不同的，而且需要上面的小三角盖住下面的三角。所以，上面的小三角为白色，下面的小三角是你想要的边框颜色。也就是border-color不同。为了能达到这个效果，要求两个小三角要一样大小，也就是border-width要一样。

     下面直接上代码：

   

/*右侧气泡 兼容firefox chrome safari ie6,7,8,9*/
 .right_tip{position:relative;width:300px;height:50px;border:3px solid #D7E0EF;color:#000;line-height:50px;text-align:center;}
 .right_tip .icon1{position:absolute;top:7px;right:-23px;width:0;height:0;font-size:0;line-height:0;border-width:10px;border-color:transparent transparent transparent #D7E0EF;border-style:solid;_border-style:dashed dashed dashed solid;}
 .right_tip .icon2{position:absolute;top:7px;right:-19px;width:0;height:0;font-size:0;line-height:0;border-width:10px;border-color:transparent transparent transparent #ffffff;border-style:solid;_border-style:dashed dashed dashed solid;}

<div class="right_tip">看我没有用图片啊，你相信吗？<em class="icon1"></em><em class="icon2"></em></div>

需要解释几个地方：

1.width和height设置为0，是因为要解决ie6下面空标签的bug

2.font-size和line-height设置为0，是因为要解决ie6下面边框bug

3._border-style:dashed dashed dashed solid,是因为要解决ie6下面border无法透明的bug，那怎么判断应该给哪个边设置dashed，哪个应该设置为solid？这个很好判断，只要让它跟你的border-color对应就行，哪个边是transparent的，hack对应的就是dashed

4.这两个em也可以换成span，一定要注意他们的是并列的关系，而不是包含关系，不然会在chrome和safari里面出现上面的三角完全盖住下面三角的bug，这个要写他们的hack比较麻烦，而且firefox和ie系列的偏移量也有小问题不一致，所以，介于此我果断换了结构，把原来嵌套的结构换成并列的

 

.demo{position:relative;width:530px;}  
textarea{overflow:auto;width:500px;height:100px;resize:none;border:1px solid #e8e8e8;} 
.icon1{position:absolute;top:10px;right:20px;right:18px\9;width:0;height:0;font-size:0;border-width:9px 0 9px 9px;border-style:solid;_border-style:dashed dashed dashed solid;border-color:transparent transparent transparent #eeeeee;} 
.icon2{position:absolute;top:-9px;right:1px;_right:0px;width:0;height:0;font-size:0;border-width:9px 0 9px 9px;border-style:solid;_border-style:dashed dashed dashed solid;border-color:transparent transparent transparent #ffffff;}

<div class="demo">
   <textarea name="" id="" ></textarea>
   <span class="icon1"><span class="icon2"></span></span>
</div>

 参考资料：http://www.zhangxinxu.com/wordpress/2010/03/%E7%BA%AFcss%E5%AE%9E%E7%8E%B0%E5%90%84%E7%B1%BB%E6%B0%94%E7%90%83%E6%B3%A1%E6%B3%A1%E5%AF%B9%E8%AF%9D%E6%A1%86%E6%95%88%E6%9E%9C/

 如有转载，请注明出处，尊重别人的劳动！