利用CSS实现三角效果

实例一：三角箭头

思路：利用元素border设置边框，再用transform选择元素，实现三角箭头效果

原理：元素border可以分别设置

设置一组邻边显示，一组邻边不显示，达到直角效果，把color设置成transparent，不懂transparent的自行百度吧

再用transform旋转，这里是顺时针旋转了45°，根据自己需求设置就行了

 

Deom：

实例一：实心三角形

思路：利用元素border宽度撑起三角形，并把width和height设置成0px

原理：同上，元素border可以分别设置，不同的是实例一border是1px，而实心三角形就得宽点了

同样，把其他三边的color设置成transparent

 

demo：

 

小贴士：学会经常使用伪元素例如after或before来实现三角形

原文链接：http://www.webstr.top/post/9.html