.item {
width:0;
height:0;
margin-right:50px;
float:left;
}
.san1 {
border-top:20px solid transparent;
border-bottom:20px solid transparent;
border-left:50px solid red;
}
.san2 {
border-top:20px solid transparent;
border-bottom:20px solid transparent;
border-right:50px solid green;
}
.san3 {
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top:50px solid purple;
}
.san4 {
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top:50px solid orange;
}
.san5 {
border-right:20px solid transparent;
border-bottom:20px solid transparent;
border-left:50px solid #000;
}
.san6 {
border-right:20px solid transparent;
border-top:20px solid transparent;
border-left:30px solid khaki;
}
.san7 {
border-top:50px solid green;
border-bottom:50px solid blue;
border-left:50px solid red;
border-right:50px solid yellow;
}
更新时间:2020-01-22 00:09:40
1、三角形width、height为0
2、为0后给节点加上边框线以及不同的颜色就会变成最后一个方块一样
3、通过上下左右边框的隐藏来实现不同的三角形