CSS实现三角形和梯形主要是依靠border是梯形的特性来做的，有点像相框的那种感觉。
CSS实现三角形：
<div id="test1"></div>
<style>
???#test1{
???????width: 50px;
???????height: 50px;
???????background: purple;
???????border-top: 50px solid red;
???????border-bottom: 50px solid green;
???????border-left: 50px solid blue;
???????border-right: 50px solid yellow;
???????margin:0 auto;
???}
</style>
CSS实现圆形、三角形、梯形、自适应正方形
原文地址：https://www.cnblogs.com/wuguanglin/p/interestingCSS.html