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
cba联赛上午开发