前言

之前我写了2篇文章，一篇是css实现一个会心动的爱心💗，一篇是用css画一个三角形。

今天咱们再来看看怎么用css来画一个五角星。

效果演示

五角星

首先我们要先了解五角星⭐️，它的五个角都是36度，加起来刚好是180度。五个角连起来，其实是一个圆。

类似这样

因为五角星每个角跟其它角都是一样的。然后我们可以利用三个一样的三角形来实现五角星。

我简单画了个图，如下：

红色的三角形，蓝色的三角形，黄色的三角形都是一样的三角形。

所以只要我们把三角形的边长求出来，就可以利用定位来实现五角星。

至于怎么求三角形的边长，可能要利用到高中的三角函数知识点。

我们可以看到五角星外层是一个圆，中心就是圆心，我们设置圆的半径为R。

画辅助线FG，是垂直线，垂直于BE, 经过圆心C。

BE等于2BF，也等于2FE。

CE辅助线平分五角星的角，平分后一个角是18度。

假设圆心的半径是60px，因为EFG是垂直三角形，

我们可以根据R * cos(18度)得到FE的长度。乘以2就是三角形底边的长度。

算出FE后，我们可以根据FE * tan(36度)得到FG的长度。

我们利用js的Math.cos和Math.tan函数。因为它们接受的参数是弧度，我们要把角度转换成弧度才能计算。

如下，角度转换成弧度的公式，PI 就是圆周率

角度 * 2 * PI /360

60 * * Math.cos(18 * 2 * Math.PI / 360) =  57.06 // FE的长度

57  * Math.tan(36 * 2 * Math.PI / 360) =  41.41 // FG的长度

根据我们算出的57.06和41.41，一个是底边，一个是垂直边，结合昨天我们总结的画三角形规律，可以画出三角形。

我们用伪元素before和after来模拟另外2个三角形。

然后对它们进行旋转rotate72度，组合起来就是五角星。

为什么是72度？因为整个圆是360度，从一个角旋转另一个角是72度。

代码如下：

<style>
  .star {
    margin: 200px auto 0;
    position: relative;
    width: 0px;
    height: 0px;
    border-color: red transparent transparent transparent;
    border-width: 41.41px 57.06px;
    border-style: solid;
  }

  .star::before {
    content: '';
    display: block;
    position: absolute;
    left: -57.06px;
    top: -41.41px;
    border-color: red transparent transparent transparent;
    border-width: 41.41px 57.06px;
    border-style: solid;
    transform: rotate(72deg);
    transform-origin: 50% 22.5%;
  }


  .star::after {
    content: '';
    display: block;
    position: absolute;
    left: -57.06px;
    top: -41.41px;
    border-color: red transparent transparent transparent;
    border-width: 41.41px 57.06px;
    border-style: solid;
    transform: rotate(-72deg);
    transform-origin: 50% 22.5%;
  }
</style>

<div class="star"></div>