用css畫(huà)三角形或者梯形等圖片主要是利用css中的border屬性
- 正方形 ==>為一個(gè)div設(shè)置如下樣式
.tri { width: 0px; height: 0px; border-top: 100px solid aqua; border-right: 100px solid skyblue; border-bottom: 100px solid aqua; border-left: 100px solid skyblue; }
正方形
-
三角形===>將其余三個(gè)邊框的顏色設(shè)為transparent 即可
三角形
3.改變div的寬高和border屬性得到不一樣的圖形
.tri {
width: 0px;
height: 0px;
border-top: 0px;
border-right: 100px solid skyblue;
border-bottom: 100px solid aqua;
border-left: 200px solid skyblue;
}
變形
4.梯形
.tri {
width: 100px;
height: 0px;
border-top: 0px;
border-right: 50px solid transparent;
border-bottom: 200px solid aqua;
border-left: 50px solid transparent;
}
梯形
5.隨機(jī)變形
.tri {
width: 100px;
height: 100px;
border-top: 50px solid transparent;
border-right: 50px solid skyblue;
border-bottom: 50px solid aqua;
border-left: 50px solid transparent;
}
隨機(jī)形狀
6.還可以用兩個(gè)或者多個(gè)div拼接成更多的圖形叨橱，繼續(xù)發(fā)揮想象吧~
