CSS绘制三角形、圆形、椭圆形、蛋形、心形、扇形、菱形、五角星

[GGXXMM]

一、绘制三角形

.triangle {
      width: 0;
      height: 0;
      border-width: 100px;
      border-style: solid;
      border-color: red transparent transparent transparent;/*倒三角*/
}

二、绘制圆形

.circle {
      width: 100px;
      height: 100px;
      background: yellow;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -o-border-radius: 50%;
 }

三、绘制椭圆

.ellipse {
      width: 200px;
      height: 100px;
      background: green;
      border-radius: 100px / 50px;
      -webkit-border-radius: 100px / 50px;
      -moz-border-radius: 100px / 50px;
      -o-border-radius: 100px / 50px;
}

四、绘制蛋形

.egg {
      width: 136px;
      height: 190px;
      background: #ffc000;
      -webkit-border-radius: 68px 68px 68px 68px / 114px 114px 76px 76px;
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
 }

五、心形

.heart {
      position: relative;
      left: 50px;
      width: 100px;
      height: 100px;
      background: red;
      transform: rotate(-45deg);/*逆时针旋转45度*/
 }
 .heart:before {/*正方形上边绘制圆形*/
      position: absolute;
      content: '';
      top: -50px;
      left: 0;
      width: 100px;
      height: 100px;
      background: red;
      border-radius: 50%;
}
.heart:after {/*正方形右边绘制圆形*/
      position: absolute;
      content: '';
      top: 0;
      left: 50px;
      width: 100px;
      height: 100px;
      background: red;
      border-radius: 50%;
}

六、扇形

.sector {
      width: 0;
      height: 0;
      border-width: 100px;
      border-style: solid;
      border-color: blue transparent transparent transparent;
      border-radius: 100px;
      -webkit-border-radius: 100px;
      -moz-border-radius: 100px;
      -o-border-radius: 100px;
}

七、菱形

.diamond {
      position: relative;
      top: -50px;
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-bottom-color: yellowgreen;
    }
    .diamond:after {
      position: absolute;
      content: '';
      left: -50px;
      top: 50px;
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-top-color: yellowgreen;
}

八、五角星

.five-star {
      position: relative;
      width: 0;
      height: 0;
      border-left: 100px solid transparent;
      border-right: 100px solid transparent;
      border-bottom: 70px solid red;
      transform: rotate(35deg);
}
.five-star:before {
      position: absolute;
      top: -45px;
      left: -65px;
      content: '';
      width: 0;
      height: 0;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      border-bottom: 80px solid red;
      transform: rotate(-35deg);
}
.five-star:after {
      position: absolute;
      top: 3px;
      left: -105px;
      content: '';
      width: 0;
      height: 0;
      border-left: 100px solid transparent;
      border-right: 100px solid transparent;
      border-bottom: 70px solid red;
      transform: rotate(-70deg);
}

参考：https://juejin.im/post/6844903809064386567