三角形：通常会使用透明的border模拟出一个三角形：▲
.traingle { ???width: 0; ???height: 0; ???border-left: 50px solid transparent; ???border-right: 50px solid transparent; ???border-bottom: 100px solid yellowgreen;}切角：采用多重线性渐变实现切角
.notching { ???width: 40px; ???height: 40px; ???padding: 40px; ???background: linear-gradient(135deg, transparent 15px, yellowgreen 0) top left, ???????linear-gradient(-135deg, transparent 15px, yellowgreen 0) top right, ???????linear-gradient(-45deg, transparent 15px, yellowgreen 0) bottom right, ???????linear-gradient(45deg, transparent 15px, yellowgreen 0) bottom left; ???background-size: 50% 50%; ???background-repeat: no-repeat;}梯形：利用伪元素加旋转透视实现梯形
.trapezoid{ ???position: relative; ???width: 60px; ???padding: 60px;}.trapezoid::before{ ???content:""; ???position: absolute; ???top: 0; right: 0; bottom: 0; left: 0; ???transform: perspective(20px) scaleY(1.3) rotateX(5deg); ???transform-origin: bottom; ???background: yellowgreen;}当然，还有另一种更简单的方法是利用border实现，借助上面的构造三角形的方法，在矩形两侧构造两个透明的三角形
.trapezoid { ???position: relative; ???width: 60px; ???border-top: 60px solid yellowgreen; ???border-left: 40px solid transparent; ???border-right: 40px solid transparent;}五边形：梯形加上三角形，很容易就组合成一个五边形，这里需要借助一个伪元素实现
.pentagon { ???position: relative; ???width: 60px; ???border-bottom: 60px solid yellowgreen; ???border-left: 40px solid transparent; ???border-right: 40px solid transparent; }.pentagon::before { ???content:""; ???position: absolute; ???top: 60px; ???left: -40px; ???border-top: 60px solid yellowgreen; ???border-left: 70px solid transparent; ???border-right: 70px solid transparent;}六边形：看看上面的梯形，如果两个反方向且底边同样大小的梯形，叠加在一起，是不是就能得到一个六边形呢？
.pentagon { ???position: relative; ???width: 60px; ???border-bottom: 60px solid yellowgreen; ???border-left: 40px solid transparent; ???border-right: 40px solid transparent;}.pentagon::before { ???content: ""; ???position: absolute; ???width: 60px; ???height: 0px; ???top: 60px; ???left: -40px; ???border-top: 60px solid yellowgreen; ???border-left: 40px solid transparent; ???border-right: 40px solid transparent;}八边形：六边形都解决了，八边形也不在话下，一个矩形加上两个梯形，可以合成一个八边形
.octagon { ???position: relative; ???width: 40px; ???height: 100px; ???background: yellowgreen;}.octagon::before { ???content: ""; ???height: 60px; ???position: absolute; ???top: 0; ???left: 40px; ???border-left: 30px solid yellowgreen; ???border-top: 20px solid transparent; ???border-bottom: 20px solid transparent;}.octagon::after { ???content: ""; ???height: 60px; ???position: absolute; ???top: 0; ???left: -30px; ???border-right: 30px solid yellowgreen; ???border-top: 20px solid transparent; ???border-bottom: 20px solid transparent;}五角星：3 个三角形叠加旋转在一起实现 ★
.star { ??margin: 50px 0; ??position: relative; ??width: 0; ??border-right: 100px solid transparent; ??border-bottom: 70px ?solid yellowgreen; ??border-left: 100px solid transparent; ??transform: rotate(35deg) scale(.6);}.star:before { ???content: ‘‘; ???position: absolute; ???border-bottom: 80px solid yellowgreen; ???border-left: 30px solid transparent; ???border-right: 30px solid transparent; ???top: -45px; ???left: -65px; ???transform: rotate(-35deg);}.star:after { ???content: ‘‘; ???position: absolute; ???top: 3px; ???left: -105px; ???border-right: 100px solid transparent; ???border-bottom: 70px solid yellowgreen; ???border-left: 100px solid transparent; ???transform: rotate(-70deg);}
六角星：一个向上的三角形 ▲，叠加上一个向下的三角形 ▼，就可以得到一个六边形
.sixstar { ???position: relative; ???width: 0; ???border-left: 50px solid transparent; ???border-right: 50px solid transparent; ???border-bottom: 100px solid yellowgreen;}.sixstar:after { ???content: ""; ???position: absolute; ???border-left: 50px solid transparent; ???border-right: 50px solid transparent; ???border-top: 100px solid yellowgreen; ???top: 30px; ???left: -50px;}八角星：其实使用两个矩形进行旋转拼接就可以了
.eightstar { ???position: relative; ???width: 100px; ???height: 100px; ???background-color: yellowgreen; ???transform: rotate(30deg);}.eightstar::before { ???content: ""; ???position: absolute; ???top: 0; ???left: 0; ???width: 100px; ???height: 100px; ???transform: rotate(45deg); ???background-color: yellowgreen;}十二角星： 最后多角星再来一个十二级角星。在八角星的基础上，再增加一个矩形，就能得到十二角啦。也就是要过第一个伪元素。
.twelvestar { ???position: relative; ???width: 100px; ???height: 100px; ???margin-bottom: 100px!important; ???background-color: yellowgreen; ???transform: rotate(30deg);}.twelvestar::before { ???content: ""; ???position: absolute; ???top: 0; ???left: 0; ???width: 100px; ???height: 100px; ???transform: rotate(30deg); ???background-color: yellowgreen;}.twelvestar::after { ???content: ""; ???position: absolute; ???top: 0; ???left: 0; ???width: 100px; ???height: 100px; ???transform: rotate(60deg); ???background-color: yellowgreen;}椭圆：使用传统的方法画一个椭圆，过去 CSS3 画椭圆，基本上只能借助 border 实现
.ellipse { #这里使用 border 画一个蛋的形状 ??width: 120px; ??height: 160px; ??background-color: yellowgreen; ??border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;}奇妙的 CSS几何图形
原文地址：https://www.cnblogs.com/xuey/p/8455431.html