纯css利用border制作三角形

点击我查看原理介绍

 

rgba(0,0,0,0) 透明 注意逗号

- 透明:

IE6浏览器不支持transparent透明属性,就border生成三角技术而言,直接设置对应的透明边框的border-style属性为dotted或是dashed即可解决这一问题,原因是在IE6下, 点线与虚线均以边框宽度为基准,点线长度必须是其宽度的3倍以上（height>=border-width*3）,虚线宽长度必须是其宽度的5倍以上（height>=border-width*5）,否则点线和虚线都不会出现.

- IE6的奇偶bug:

如果定位外框高度或是宽度为奇数,则IE6下,绝对定位元素的低定位和右定位会有1像素的误差.所以,尽量保证外框的高度或宽度为偶数值.

- IE6的空div高度bug:

IE6下,空div会有莫名的高度,也就是说height:0;不顶用,此时形成的尖角的实际占高于其他浏览器是有差异的.可使用font-size:0; + overflow:hidden;修复此问题. - filter: chroma滤镜 该属性属性可以设置一个对象中指定的颜色为透明色, 如:

border-color: pink;
filter: chroma(color=pink);