css可以实现很多形状，包括三角，圆，椭圆等常规形状，当然一些特殊形状也可以实现。下面就做个简单的总结：

1.三角

a.css

/*三角css*/
.triangle{width: 0;height: 0;border: 18px solid transparent;float: left;}
.triangle.left{border-left: 20px solid var(--bgc);}
.triangle.right{border-right: 20px solid var(--bgc);}
.triangle.top{border-top: 20px solid var(--bgc);}
.triangle.bottom{border-bottom: 20px solid var(--bgc);}
.triangles{float: left;width: 0;height: 0;margin-right: 15px;}
.triangles.topleft{border-top: 20px solid var(--bgc);border-right: 20px solid transparent;}
.triangles.topright{border-top: 20px solid var(--bgc);border-left: 20px solid transparent;}
.triangles.bomleft{border-bottom: 20px solid var(--bgc);border-right: 20px solid transparent;}
.triangles.bomright{border-bottom: 20px solid var(--bgc);border-left: 20px solid transparent;}

b.html

<div class="d-box">
		  	<div class="triangle left"></div>
		  	<div class="triangle right"></div>
		  	<div class="triangle top"></div>
		  	<div class="triangle bottom"></div>
		  	<div class="triangles topleft"></div>
		  	<div class="triangles topright"></div>
		  	<div class="triangles bomleft"></div>
		  	<div class="triangles bomright"></div>
</div>

2.画梯形

a.css

.trapezoid {width: 30px;height: 30px; border: 30px solid transparent;float: left;}
.trapezoid.left{border-left: 30px solid var(--bgc);}
.trapezoid.right{border-right: 30px solid var(--bgc);}
.trapezoid.top{border-top: 30px solid var(--bgc);}
.trapezoid.bottom{border-bottom: 30px solid var(--bgc);}

b.html

<div class="d-box">
		  	<div class="trapezoid left"></div>
		  	<div class="trapezoid right"></div>
		  	<div class="trapezoid top"></div>
		  	<div class="trapezoid bottom"></div>
</div>

3.画扇形

a.css

.sector{border: 20px solid transparent;width: 0; border-radius: 20px;float: left;}
.sector.top{border-top-color: var(--bgc);}
.sector.left{border-left-color: var(--bgc);}
.sector.right{border-right-color: var(--bgc);}
.sector.bottom{border-bottom-color: var(--bgc);}

b.html

<div class="d-box">
		  	<div class="sector top"></div>
		  	<div class="sector left"></div>
		  	<div class="sector bottom"></div>
		  	<div class="sector right"></div>
 </div>

4.切角

a.css

.bgd-train{width: 200px;height: 200px;}
.bgd-train.train{background: linear-gradient(-45deg,transparent 15px, var(--bgc) 0) bottom right,
				linear-gradient(45deg,transparent 15px, var(--bgc) 0) bottom left,
				linear-gradient(135deg,transparent 15px, var(--bgc) 0) top left,
				linear-gradient(-135deg,transparent 15px,var(--bgc) 0) top right;background-size:50% 50%;background-repeat:no-repeat;}
.bgd-train.cicle{background: radial-gradient(circle at top left, transparent 15px, var(--bgc)  0) top left,
				radial-gradient(circle at top right, transparent 15px, var(--bgc)  0) top right,
				radial-gradient(circle at bottom right, transparent 15px, var(--bgc)  0) bottom right,
				radial-gradient(circle at bottom left, transparent 15px, var(--bgc)  0) bottom left;
				background-size:50% 50%;background-repeat:no-repeat;
}

b.html

 <!--切角-->
<div class="d-box">
		  	<div class="bgd-train train"></div>
</div>
 <!--弧形切角-->
<div class="d-box">
		  	<div class="bgd-train cicle"></div>
</div>

5.其他

a.css

/*心*/
.heart {position: relative;width: 100px;height: 90px;}
.heart:before,.heart:after {position: absolute;content: ""; left: 50px;top: 0;width: 50px;height: 80px;background: var(--bgc) ;border-radius: 50px 50px 0 0;transform: rotate(-45deg);transform-origin: 0 100%;}
.heart:after {left: 0;transform: rotate(45deg);transform-origin: 100% 100%;}

/*------五角星------*/
.star-five{margin:50px 0;position:relative;float: left;display:block;width:0;height:0;border-right:100px solid transparent;border-bottom:70px solid var(--bgc);border-left:100px solid transparent;transform:rotate(35deg)}
.star-five:before{border-bottom:80px solid var(--bgc);border-left:30px solid transparent;border-right:30px solid transparent;position:absolute;height:0;width:0;top:-45px;left:-65px;display:block;content:'';transform:rotate(-35deg)}
.star-five:after{position:absolute;display:block;top:3px;left:-105px;width:0;height:0;border-right:100px solid transparent;border-bottom:70px solid var(--bgc);border-left:100px solid transparent;transform:rotate(-70deg);content:''}
		

b.html

<div class="d-box">
				<div class="heart"></div>
				<div class="star-five"></div>
</div>