Effective前端3：用CSS畫一個三角形
三角形的場景很常見，打開一個頁面可以看到各種各樣的三角形：
由于div一般是四邊形，要畫個三角形并不是那么直觀。你可以貼一張png，但是這種辦法有點low，或者是用svg的形式，但是太麻煩。三角形其實可以用CSS畫出來。如上圖提到，可以分為兩種三角形，一種是純色的三角形，第二種是有邊框色的三角形，先介紹最簡單的純色三角形。
1. 三角形的畫法
三角形可以用border畫出來，首先一個有四個border的div應該是這樣的：
然后把它的高度和寬度去掉，剩下四個border，就變成了：
再把border-top去掉，沒有了border-top就把上面的區(qū)域給裁掉了：
接下來，再讓左右兩邊的border透明，就是一個三角形了：
這里是用了底部的border作為三角形，如果要取左邊border，同理只需讓上下兩個border顏色為transparent，同時不要右邊的border：
