使用CSS border绘制箭头

      在日常开发的过程中，一些小图标，例如小箭头，都是比较常用的，最近看到了一个用CSS绘制小箭头的方法，但是对其实现原理不是很清楚，于是就探究了一下：

    先贴一下绘制箭头的代码：

HTML:

<div class="container">
CSS模拟箭头：
<div class="css-arrow">
<div class="arrow"></div><br>
<div class="arrow-top"></div>
<div class="arrow-right"></div>
<div class="arrow-left"></div>
<div class="arrow-bottom"></div>
</div>
</div>

CSS:

.arrow{
width: 0;
height: 0;
border-width: 20px;
border-color: red #ddd red #ddd;
border-style: solid;
}
.arrow-top{
width: 0;
height: 0;
border-width: 20px;
border-color: red transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
.arrow-right{
width: 0;
height: 0;
border-width: 20px;
border-color: transparent #ddd transparent transparent;
border-style: dashed solid dashed dashed;
}
.arrow-bottom{
width: 0;
height: 0;
border-width: 20px;
border-color: transparent transparent red transparent;
border-style: dashed dashed solid dashed;
}
.arrow-left{
width: 0;
height: 0;
border-width: 20px;
border-color: transparent transparent transparent #ddd;
border-style: dashed dashed dashed solid;
}

效果：



     其中可以通过border-width来控制箭头的大小，定义除了需要显示的一边border-style为solid其他都为dashed，这是为了使IE支持透明的边框（默默吐槽IE，称霸一时就跳的不行，问题一大堆）。

     原理是因为IE中dotted与dashed显示都与容器的高宽（也就是边框的长度）有关，如果长度不够，dotted与dashed都不会显示（见下图），也就模拟了透明的效果，其中dotted要求长度是边框宽度的三倍以上，而dashed要求是边框宽度的五倍以上，所以我们选择范围更大的dashed来保证透明效果,这也是为什么要设置容器width:0 height:0的原因。



   但为什么直的边框竟然可以模拟三角形呢？我们设置一下容器的宽高来看看当边框“特别宽”的时候是什么样子的：



只是当边框相对与容器特别小的时候我们才看起来是四条直线组成了边框，这也就是当容器宽高为0会呈现出三角形的原因。

    有关dotted dashed区别的问题可以移步http://it.chinawin.net/application/article-180df.html,讲解的非常详细。