今天小编跟大家讲解下有关Css绘制箭头实现代码 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关Css绘制箭头实现代码 的相关资料，希望小伙伴们看了有所帮助。
具体的做法是对一个矩形 设置border 并将width和height设置为0 即可模拟出箭头形状（三角形）。 如下图所示绘制了一个矩形 并将矩形的width和height设置为0 border设置为100px：
相关CSS: 复制代码代码如下: 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
第一个箭头的CSS 其余的类似： 复制代码代码如下: border-left:100px solid transparent; border-right:100px solid transparent; border-bottom:100px solid #00F; width:0; height:0; 下面是一个箭头的Demo： PS: 2012-6-1 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;
来源：爱蒂网
