纯css写出三角形(实心、空心、带边框)

在看项目的代码的时候，发现这样的四个箭头（不包括中间）

但是源码中只写了一个div（剩下的三个是通过旋转得来）

后来在chrome里调试的时候发现是通过css实现的

关于原理：

css:

 

 每个div可以看作是由内部方形content和四个不同方形的梯形border组成的，如果内部的content宽和高都是0(0; height:0;)的时候，梯形就变成了三角形：

 如果需要某个方向的三角形，把其余的三个方向的border的颜色调成透明(transparent)就可以了

再搭配transform: rotate(90deg)就能完成特定角度的三角形了

关于三角形的大小：

三角形底边的长度=2*border

高=border-bottom

参考这篇文章

----------------------------------------------------------------

空心三角形的实现原理是伪类:after

在:after后利用absolute定位的背景色三角形把实心三角形遮盖住

 

空心三角形的边缘粗细取决于被两个三角形的相对定位

参考这篇文章+这篇文章

----------------------------------------------------------------

带边框的三角形实现思路是两个三角形的叠层，下面的三角形较大点

再利用上层relative，下层absolute定位让三角形实现叠层

参考这篇文章