在看项目的代码的时候，发现这样的四个箭头（不包括中间）
但是源码中只写了一个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定位让三角形实现叠层
参考这篇文章