1. 實現一個簡單的三角形
使用CSS盒模型中的border（邊框）即可實現如下所示的三角形：
CSS實現簡單三角形
實現原理：
首先來看在為元素添加border時，border的樣子；假設有如下代碼：
| <div></div>div { width: 50px; height: 50px; border: 2px solid orange;} |
效果圖：
border的一般使用
這是我們平常使用border最普遍的情況——往往只給border一個較小的寬度（通常為1-2px）；然而這樣的日常用法就會容易讓大家對border的形成方式產生 誤解 ，即認為元素的border是由四個矩形邊框拼接而成。
然而事實并不是這樣。實際上，元素的border是由 三角形 組合而成，為了說明這個問題，我們可以增大border的寬度，并為各border邊設置不同的顏色：
| div { width: 50px; height: 50px; border: 40px solid; border-color: orange blue red green;} |
效果圖：
border的形成方式
既然如此，那么更進一步，把元素的內容尺寸設置為0會發生什么情況呢？
| div { width: 0; height: 0; border: 40px solid; border-color: orange blue red green;} |
效果圖：
元素內容尺寸為0
我們將驚奇地發現，此時元素由上下左右4個三角形“拼接”而成；那么，為了實現最終的效果，即保留最下方的三角形，還應該怎么做？很簡單，我們只需要把其它border邊的顏色設置為 白色 或 透明色 ：
| div { width: 0; height: 0; border: 40px solid; border-color: transparent transparent red;} |
最終效果
Duang~ 最終的簡單三角形就繪制出來了。同理，如果想要得到其它邊上的三角形，只需要將剩余的border邊顏色設置為白色或透明色即可。
不過，被“隱藏”的上border仍然占據著空間，要想使得繪制出的三角形尺寸最小化，還需要將上border的寬度設置為0（其它情況同理）：
| div { width: 0; height: 0; border-width: 0 40px 40px; border-style: solid; border-color: transparent transparent red;} |
