css 叠加实现多角星

五角星:三个三角形,根据不同位置和角度叠加生成
六角星:两个三角形,相反方向叠加生成
八角星:两个矩形,旋转叠加生成
十二角星：三个矩形,旋转叠加生成

代码示例:

.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 red;
    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 blue;
    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 red;
 }
 .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: red;
    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: red;
}

.twelvestar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    transform: rotate(60deg);
    background-color: blue;
}