用純css3繪制三角形的原理

id="rLoZvg" src="http://codepen.io/lindayun/pen/OXAKQy?height=400&theme-id=0&slug-hash=rLoZvg&default-tab=result&user=airen" scrolling="no" frame height="400" allowtransparency="true" allowfullscreen="true" class="cp_embed_iframe undefined" style="width: 100%; overflow: hidden;">

預備知識

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