神奇的 CSS 形狀

在StackOverflow上有這么一個問題，有位同學在http://css-tricks.com/examples/ShapesOfCSS/  找到一些使用CSS做的形狀，其中一位同學對下面的這個形狀充滿了疑問。

形狀是：

代碼是：

#triangle-up {
width : 0 ;
height : 0 ;
border-left : 50px solid transparent ;
border-right : 50px solid transparent ;
border-bottom : 100px solid red ;
}

這位同學就提問啦，為啥這么這么幾句就能畫出一個三角形呢？
于是呢，有高人出現，這個高人圖文并茂的解釋了這個三角的成因

首先呢，我們需要了解HTML標記的Box Model（盒模型），這個例子中呢我們將content，padding都看作content。忽略掉margin。那么一個盒模型就是下圖

中間是內容，然后是4條邊。每一條邊都有寬度。
根據上面CSS的定義，沒有border-top（頂邊）的情形下 ,我們的圖形如下：

width設置為0后 ，內容沒有了就成為下圖：

height也設置為0，只有底邊了。

然后兩條邊都是設置為透明，最后我們就得到了

這個屬于奇技淫巧，但是也說明CSS的強大，沒有做不到只有想不到。另外http://css-tricks.com/examples/ShapesOfCSS/ 還能找到很多其他的形狀，感興趣的同學可以自己去看。