自己动手丰衣足食之气泡框和常见css图形（三角）
原文地址：http://www.cnblogs.com/keepfool/p/5616326.html
参考链接：http://www.cnblogs.com/sdjiegeng/p/5836239.html
Document
气泡框（或者提示框）是网页中一种很常见的元素，大多用来展示提示信息，如下图所示：
拆分来看，形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头，要制作出这样的气泡框，如果解决了三角形小箭头就容易了。一种方法就是制作这样一个三角形箭头的图片，然后定位在矩形框上。但这种解决办法在后期更改气泡框会很不方便，可能每修改一次气泡框都要重新制作一个三角形小图标。如果我们能够直接用HTML和CSS代码实现这样一个三角形小箭头一切都迎刃而解了。
首先我们来看一下border这个属性，当我们把一个div的border-color设为不同值的时候，可以看到四边都成了一个梯形。
| 1 | # test{ width : 50px ; height : 50px ; border-width : 50px ; border-style : solid ; border-color : #09F #990 #933 #0C9 ;} |
如果我们继续把这个div的width和height都设为0，可以看到四边都成了一个三角形。
| 1 | # test{ width : 0 ; height : 0 ; border-width : 75px ; border-style : solid ; border-color : #09F #990 #933 #0C9 ;} |
在主流浏览器中检测一下，发现IE6中存在一个小问题，上下边能形成三角形，左右两边仍然还是梯形
通过实验发现当把div的font-size和line-height都设为0的时候，div的四边在IE6下都能形成完美的三角形：
| 1 | #test{ width : 0 ; height : 0 ; border-width : 75px ; border-style : solid ; border-color : #09F #990 #933 #0C9 ; font-size : 0 ; line-height : 0 ;} |
很显然我们只需要其中的一个三角形，那么只需要将其他三边的color设置为透明或者跟页面背景一样的颜色，就能模拟出一个三角来，推荐将其他三边颜色设置为透明，即color的值为transparent，如果其他三边颜色跟页面背景一样，虽然视觉上只能看到一个三角，但背景颜色一旦改变，其他三边颜色也要随之改变。
| 1 | #test{ width : 0 ; height : 0 ; border-width : 75px ; border-style : solid ; border-color : #09F transparent transparent ; font-size : 0 ; line-height : 0 ;} |
问题又来了，IE6下transparent无效！其他三边被设置成默认的黑色了。
但通过实验发现把border-style设置为dashed后，IE6下其他三边就能透明了！
| 1 | #test{ width : 0 ; height : 0 ; border-width : 75px ; border-style : solid dashed dashed ; border-color : #09F transparent transparent ; font-size : 0 ; line-height : 0 ;} |
到这一步我们已经成功的模拟出了一个小三角，下一步我们把这个小三角同矩形框结合起来。先设置一个矩形框，然后把小三角定位到矩形框上。先来写出HTML结构：
| 1 2 3 4 | < div class="tag"> < em > |
CSS样式：
| 1 2 | .tag{ width : 300px ; height : 100px ; border : 5px solid #09F ; position : relative ;} .tag em{ display : block ; border-width : 20px ; position : absolute |
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！