pure css draw a triangle
我们有这样一个边框
.d1 {
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 {
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 {
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 {
0;
/*height: 200px;*/
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid pink;
}
.d5 {
0;
/*height: 200px;*/
border-top: 10px solid yellow;
border-left: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid transparent;
}
.d6 {
0;
/*height: 200px;*/
border-top: 10px solid transparent;
border-left: 10px solid purple;
border-bottom: 10px solid transparent;
border-right: 10px solid transparent;
}
.d7 {
0;
/*height: 200px;*/
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid blue;
border-right: 10px solid transparent;
}