理解纯CSS画三角形

pure css draw a triangle

code { display: inline-block; width: 300px; background-color: #E0E0E0 }
.text_intent { text-indent: 38px }
.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 }
.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 }
.d3 { width: 0; height: 0; border-top: 10px solid yellow; border-left: 10px solid purple; border-bottom: 10px solid blue; border-right: 10px solid pink }
.d4 { width: 0; height: 0; border-top: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid pink }
.d5 { width: 0; height: 0; border-top: 10px solid yellow; border-left: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid transparent }
.d6 { width: 0; height: 0; border-top: 10px solid transparent; border-left: 10px solid purple; border-bottom: 10px solid transparent; border-right: 10px solid transparent }
.d7 { width: 0; height: 0; border-top: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 10px solid blue; border-right: 10px solid transparent }

我们有这样一个边框

.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;

}

 

关于画其他三角形，总结一句话：左边中，上中，右右，下下，意思就是，左边的三角形变大会往中间挤压，上面的额也是，右边的变大往右边挤压，下面的变大往下挤压