三角形和箭头这两个图标在网页中经常会用到，例如：下拉选择框、排序、返回到上一页、导航条，分页都会用到三角形或者箭头，当然是用图片的方式的确可以实现这一样式，但是是用图片如果调整颜色那就比较困难了，除非再做一张图片，这样的做不仅浪费开发成本并且会降低网页性能。我们可以采用 CSS 画出三角形或者箭头：
使用 border 画三角形和箭头
一条边框在和模型中其实并不是一条线，如果我们将边框设置得足够大，并且设置不同的颜色，我们就很容易看到边框的本质，从下图很容易可以看出其事 border 在一个正方形 DOM 上其实是一个梯形：
css-border.png
画三角形
利用这一原理我们可以将 DOM 的高和宽设置为 0 像素，通过设置边框的颜色透明来画出不同的三角形，当然也可以来设置 border 的宽度来画出不同角度的三角形：
css-border-triangle.png
.triangle {
width: 0;
height: 0;
border-top: 50px solid #ccc;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
画箭头
那么如何才用 border 来画箭头呢，只需要用一个三角形边框（颜色需要和背景颜色一致）来重叠挡住另外一个三角形边框即可。
优势和缺点
- [优势]兼容 IE；
- [优势]颜色可控；
- [缺点]不能画出空心透明的三角形；
- [缺点]高度和宽度很难控制，需要一定的计算；
使用 transform 和 border 画三角形和箭头
CSS 3 的出现，让 DOM 有了变形的效果，我们可以通过一些简单的旋转变形来画出三角形或者箭头。
画箭头
利用边框加上旋转，我们设置两个相邻的边框，然后做 45 度的旋转，这样就可以得到不同类型的箭头了：
css-transform-arrow.png
.arrow {
width: 50px;
height: 50px;
border-top: 5px solid #ccc;
border-left: 5px solid #ccc;
transform: rotate(45deg)
}
画三角形
如果要画三角形的话，我们需要在这个箭头上增加一条边长线就可以了。
优势和缺点
- [优势]颜色可控；
- [缺点]不能画出实心的三角形；
- [缺点]高度和宽度很难控制，需要一定的计算；
- [缺点]不兼容低版本 IE
其它方式
当然还有其它的方式来画三角形和箭头：
- Canvas
- SVG
- CSS 点阵
总结
这两种画法都存在有有缺点，应该根据具体的应用场景来确定使用哪种方式。当然我们之所以采用 CSS 来画一些图形，是因为我们在模块化和性能上做考虑，尽量在组件级别的 CSS 少使用图片。
网友评论