前端 - 五行CSS代码绘制箭头【技巧】

以前说本身要每周至少出一篇文章，这个没有作到，打脸了。之后我注意点，有好东西就记录下来，分享给你们。

今天写代码发现一个有趣的现象，是前端的，看到一个小图标，却看不到图片，而是由纯css写的，关键是不知道为何会形成三角形模样，就5行代码，以下图：

看了半天没发现怎么实现的，后来我把border-top和border-bottom都设置上了颜色，就变成这样：

看到了三种颜色，border的left、top和bottom都各自带一种颜色，有一点点感受，可还不知道为何三种border会成这样的形式。我给p元素加上宽高以后我才恍然大悟：

由此我认识到：border仍是我之前所认识的border，只是没有写右边框而已，注意到若是没写右边框的话边界是直线，若是相邻的两个border接触的话，二者的边界是斜线分割 再次验证一下，只写border-left和border-top，border-left的下面是横线，二者交接是斜线，border-top是垂直线：