纯CSS绘制箭头图标

剧情回顾

CSS绘制图标是一个老话题，以前为了低版本浏览器的兼容性问题，通常会在PS里面做箭头，渐变背景以及圆角之类的。

图片的主要劣势：

用PS处理这些的图片，最麻烦的地方就是维护非常不方便，重新打开PS，重新设置颜色和大小！

另外，每个图片就是一个http请求，影响整体页面记载速度，如果遇到图片没加载出来的情况，效果就出不来！

CSS的主要劣势：

低版本浏览器不支持CSS3，比如颜色渐变linear-gradient以及动画等等

但是，人们使用的浏览器终端版本始终是越来越新，老掉牙的浏览器已经很少，而且会越来越少，对于那些少许的使用过时产品的用户来说，不必为了让他们获得最佳的用户体验而折腾大部分时间。把那些时间用在服务更多的用户上才是英明的选择！

本片开始：

CSS制作箭头的效果图

HTML代码部分

<div class="arrow arrow-down"></div>
<div class="arrow arrow-left"></div>
<div class="arrow arrow-right"></div>
<div class="arrow arrow-up"></div>

CSS代码部分

.arrow{border: 10px solid transparent;width: 0;position: relative;}
.arrow-up{border-bottom: 10px solid #ddd}
.arrow-up:after{content: '';border: 10px solid transparent;border-bottom:10px solid #fff;position: absolute;left: -10px;top:-6px;}
.arrow-down{border-top: 10px solid #ddd}
.arrow-down:after{content: '';border: 10px solid transparent;border-top:10px solid #fff;position: absolute;left: -10px;top:-14px;}
.arrow-left{border-right: 10px solid #ddd}
.arrow-left:after{content: '';border: 10px solid transparent;border-right:10px solid #fff;position: absolute;left: -6px;top:-10px;}
.arrow-right{border-left: 10px solid #ddd}
.arrow-right:after{content: '';border: 10px solid transparent;border-left:10px solid #fff;position: absolute;left: -14px;top:-10px;}

本例箭头夹角角度为90度，如果需要箭头夹角大于90度或者小于90度，只需调整相应的像素大小即可，其他情况请举一反三！

-- The End --