论用 CSS 实现各种形状

（一）三角形

html

<div class="triangle"></div>

css

.triangle {
   
	width: 0;
	border: 50px solid red;
	border-color: red transparent transparent;
}

解析：先用边框画一个正方形，然后把其他3面的颜色变成透明；其他三角形都类似。

（二）扇形

html

<div class="sector"></div>

css

.sector {
   
	width: 0;
	border: 100px solid red;
	border-color: red transparent transparent;
	border-radius: 100px;
}

解析：画出三角形后，给三角形 border-radius

（三）梯形

html

<div class="trapezoid"></div>

css

.trapezoid {
   
	width: 60px;
	border: 50px solid red;
	border-color: transparent transparent red;
}

解析：画出三角形后，给三角形增加宽度。

（四）侧梯形

html

<div class="ce-trapezoid"></div>

css

.ce-trapezoid {
   
	height: 60px;
	border: 50px solid red;
	border-color: transparent transparent transparent red;
}

解析：画出三角形后