Effective前端3：用CSS畫一個(gè)三角形

三角形的場(chǎng)景很常見，打開一個(gè)頁面可以看到各種各樣的三角形：
三角形應(yīng)用場(chǎng)景

由于div一般是四邊形，要畫個(gè)三角形并不是那么直觀。你可以貼一張png，但是這種辦法有點(diǎn)low，或者是用svg的形式，但是太麻煩。三角形其實(shí)可以用CSS畫出來。如上圖提到，可以分為兩種三角形，一種是純色的三角形，第二種是有邊框色的三角形，先介紹最簡單的純色三角形。

1. 三角形的畫法

三角形可以用border畫出來，首先一個(gè)有四個(gè)border的div應(yīng)該是這樣的：

然后把它的高度和寬度去掉，剩下四個(gè)border，就變成了：

再把border-top去掉，沒有了border-top就把上面的區(qū)域給裁掉了：

接下來，再讓左右兩邊的border透明，就是一個(gè)三角形了：

這里是用了底部的border作為三角形，如果要取左邊border，同理只需讓上下兩個(gè)border顏色為transparent，同時(shí)不要右邊的border：