前端 - 五行CSS代碼繪製箭頭【技巧】

以前說本身要每週至少出一篇文章，這個沒有作到，打臉了。之後我注意點，有好東西就記錄下來，分享給你們。

今天寫代碼發現一個有趣的現象，是前端的，看到一個小圖標，卻看不到圖片，而是由純css寫的，關鍵是不知道爲何會形成三角形模樣，就5行代碼，以下圖：

看了半天沒發現怎麼實現的，後來我把border-top和border-bottom都設置上了顏色，就變成這樣：

看到了三種顏色，border的left、top和bottom都各自帶一種顏色，有一點點感受，可還不知道爲何三種border會成這樣的形式。我給p元素加上寬高以後我才恍然大悟：

由此我認識到：border仍是我之前所認識的border，只是沒有寫右邊框而已，注意到若是沒寫右邊框的話邊界是直線，若是相鄰的兩個border接觸的話，二者的邊界是斜線分割 再次驗證一下，只寫border-left和border-top，border-left的下面是橫線，二者交接是斜線，border-top是垂直線：