css-利用border实现三角形箭头的原理

css样式开发中，有时会使用一个三角形作为箭头的情形，那实现原理是怎样的呢？

抛开理论，按下面流程演变一次，基本能懂个大概了

1、首先，实现一个宽高为100px,边框为20px的盒子（为了便于区分，上下左右边框用了不同颜色）：

2、将宽高大小设为0，变成这样：

3、再去掉上边界：

4、最后一步，将左右边界设成透明， 三角形就出来了！！

实现原理:
主要是利用的盒子边框交叉处的渲染特性。

细心的你会发现,盒子的4个角的其实是会有两条边界重叠：

这4个角空间会依照对角线去划成2部分，然后分给相邻两条边界。
理解了这个之后，后面的2,3,4步就水到渠成了