理解纯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;

}

 

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