效果如下：
代码如下，注释很清晰。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>形状</title><style>* {margin: 0;padding: 0;}div {display: inline-block;}/* 三角形start */.traingle {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid yellowgreen;}/* 三角形 end */.mt-40 {margin-top: 40px;}/* .demo {background: green;width: 40px;height: 40px;padding: 40px;margin: 40px;border: 20px solid red;} */h1 {font-size: 24px;display: inline-block;}/* 切角 start */.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;}/* 切角 end *//* 矩形两侧构造两个三角形就是梯形 */.traoezoid {position: relative;width: 60px;border-top: 60px solid yellowgreen;border-left: 40px solid transparent;border-right: 40px solid transparent;}/* 利用伪元素加旋转透视实现梯形 */.traoezoid-second {position: relative;width: 60px;padding: 60px;}.traoezoid-second::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;}/* 梯形加上三角形 */.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;}/* 六边形 */.hexagon {position: relative;width: 60px;border-bottom: 60px solid yellowgreen;border-left: 40px solid transparent;border-right: 40px solid transparent;}.hexagon::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);}</style></head><body><h1>三角形</h1><div class="traingle"></div><h1>切角</h1><div class="notching mt-40"></div><h1>梯形1</h1><div class="traoezoid"></div><h1>梯形2</h1><div class="traoezoid-second"></div><h1>五边形</h1><div class="pentagon"></div><h1>六边形</h1><div class="hexagon"></div><hr class="mt-40"><h1>八边形</h1><div class="octagon"></div><h1>五角星</h1><div class="star"></div></body></html>
