Html
    Css
    Js

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

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css三角形

更新时间:2020-01-22 00:09:40

1、三角形width、height为0

2、为0后给节点加上边框线以及不同的颜色就会变成最后一个方块一样

3、通过上下左右边框的隐藏来实现不同的三角形

0