預備知識

當我們設定一個div其width與height為100px，並且設定其四邊框的寬度為100px，且分別設定其顏色後，我們可以看到如下的一張圖片

此時如果設定這個div的height為0的話，其他不變，會得到下面這個圖形

下面把其寬度也設定為0後，得到如下的一張圖片

正式講解

當我們如下設定程式碼並賦給div相應的屬性時

#sider2{
    width: 100px;
    height: 100px;
    border-top: 30px solid #000;
    border-right: 30px solid #ff0000;
    border-left: 30px solid #00ff00;
    border-bottom: 30px solid #0000ff;
}
 

會得到如下的一張圖

接著當不設定border-bottom，即預設其為0時，可以得到下面的圖片

然後當設定其width為0時，如下圖

繼續設定其height為0

最後假若你把border-left,border-right設定為透明之後，就可以看到如下的三角形了

實現一個直角三角形，則最後需要兩個border邊的配合使用，瀏覽器會自動進行一些“拉伸變換”後就可以得到一個直角三角形。

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}
 

以上轉載自：http://www.cnblogs.com/huangzhilong/p/5030659.html

PS：用來繪製三角形的必須是block元素，after和before偽劣是行內元素，必須定義為inline-block或者block之後才能繪製

PS：input不支援偽元素(:after,:before)。:before和:after偽元素指定了一個元素文件樹內容之前和之後的內容。作為DOM元素，偽元素都是在容器內進行渲染的。input，img，iframe等元素都不能包含其他元素，所以不能通過偽元素插入內容。