.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、通过上下左右边框的隐藏来实现不同的三角形