likes
comments
collection

用css画一个五角星

作者站长头像
站长
· 阅读数 13

前言

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

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

效果演示

五角星

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

类似这样

用css画一个五角星

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

我简单画了个图,如下:

用css画一个五角星

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

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

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

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

用css画一个五角星

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

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

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

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

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

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

我们利用js的Math.cosMath.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,一个是底边,一个是垂直边,结合昨天我们总结的画三角形规律,可以画出三角形。

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

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

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

用css画一个五角星

代码如下:

<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>