用純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等元素都不能包含其他元素,所以不能通過偽元素插入內容。