Css绘制箭头

Css绘制箭头

之前做箭头一直都是用图片，也尝试过用新浪微博用的那种特殊符号“◆”，不过宽高，三角形的大小等都不太好控制，后来发现可以直接用css绘制，非css3，使用常规的border进行绘制，即使在IE6下也可以完美实现。

具体的做法是对一个矩形，设置border，并将width和height设置为0，即可模拟出箭头形状（三角形）。 如下图所示绘制了一个矩形，并将矩形的width和height设置为0，border设置为100px：

border-left:100px solid #F00;  
border-right:100px solid #F00;   
border-top:100px solid #00F;  
border-bottom:100px solid #00F;  
width:0;  
height:0;

上面的其实就是四个矩形，分别是上下左右四个方向，如果我们想要某一个方向的矩形，就可以将它相邻两侧的border-color设置为transparent,对侧不设置border。

border-left:100px solid transparent;  
border-right:100px solid transparent;  
border-bottom:100px solid #00F;  
width:0;  
height:0;
font-sie:0;

原理很简单，就是用两个三角形拼出一个箭头形状:

• 外层的三角形充当箭头的border，三角形的border-color设置成和主体区域的border相同
• 内层的三角形充当箭头的体，三角形的border-color设置成主体的背景颜色
• 内层和外层三角形的距离就是箭头的”border-width”,这个距离应该设置成和主体的border-width大小相同

IE6不支持transparent，因此上面的代码在IE6加一点处理透明的hack，修改后的代码如下

border-left:100px solid transparent;
border-right:100px solid transparent;
_border-left:100px solid black; _filter:chroma(color=black);
_border-right:100px solid black; _filter:chroma(color=black);
border-bottom:100px solid #00F;
width:0;
height:0;
font-size:0;