理解純CSS畫三角形

pure css draw a triangle

我們有這樣一個邊框

.d1 {

width: 200px;

height: 200px;

border-top: 10px solid yellow;

border-left: 10px solid purple;

border-bottom: 10px solid blue;

border-right: 10px solid pink;

}

關鍵在於width的寬度高度必須設定為0四個角度的邊框就會相互擠壓

.d2 {

width: 0;

height: 200px;

border-top: 10px solid yellow;

border-left: 10px solid purple;

border-bottom: 10px solid blue;

border-right: 10px solid pink;

}

第三步：吧height改成0或者不設定也可以,會看到三角形啦，然後怎麼只顯示一個三角形呢？

.d3 {

width: 0;

/*height: 200px;*/

border-top: 10px solid yellow;

border-left: 10px solid purple;

border-bottom: 10px solid blue;

border-right: 10px solid pink;

}

第四步：還記得border的transparent透明屬性麼

.d4 {

width: 0;

/*height: 200px;*/

border-top: 10px solid transparent;

border-left: 10px solid transparent;

border-bottom: 10px solid transparent;

border-right: 10px solid pink;

}

.d5 {

width: 0;

/*height: 200px;*/

border-top: 10px solid yellow;

border-left: 10px solid transparent;

border-bottom: 10px solid transparent;

border-right: 10px solid transparent;

}

.d6 {

width: 0;

/*height: 200px;*/

border-top: 10px solid transparent;

border-left: 10px solid purple;

border-bottom: 10px solid transparent;

border-right: 10px solid transparent;

}

.d7 {

width: 0;

/*height: 200px;*/

border-top: 10px solid transparent;

border-left: 10px solid transparent;

border-bottom: 10px solid blue;

border-right: 10px solid transparent;

}

關於畫其他三角形，總結一句話：左邊中，上中，右右，下下，意思就是，左邊的三角形變大會往中間擠壓，上面的額也是，右邊的變大往右邊擠壓，下面的變大往下擠壓

作者：承蒙時光

出處：http://www.cnblogs.com/timetimetime/

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連線，否則保留追究法律責任的權利。