CSS中利用border实现三角形箭头

1.首先，实现一个宽高为30px,边框为20px的盒子(分别设置上，下，左，右边框用不同颜色，方便区分)：
效果：

2.将宽高设置为0，变成这样：

3、如果我们只想要top的三角形 实现步骤 把相邻的三角形设置为透明(transparent) 不需要设置底部：