用純css3繪製三角形的原理

預備知識

當我們設置一個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等元素都不能包含其他元素，所以不能通過僞元素插入內容。