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/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
