用css画一个五角星
前言
之前我写了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个三角形。
然后对它们进行旋转rotate
72度,组合起来就是五角星。
为什么是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>
转载自:https://juejin.cn/post/7087231528668758052