纯CSS绘制箭头图标

发布于 2016-11-04 作者 [重庆SEO]

剧情回顾

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度,只需调整相应的像素大小即可,其他情况请举一反三!