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