小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

绘制

国庆即将来临，这篇文章来讲一下五角星的绘制，祝福祖国更加的繁荣昌盛。

容器

<div class="five-pointed-star"></div>

绘制五角星我们准备一个div元素足以，接下来就是它的变身时刻。

样式

五角星怎么由三角形或者四边形拼接得到呢？我们可以利用三个三角形拼接，然后进行旋转变换，就可以得到五角星了。

解析

五角星的小角是36°，假设b已知，我们可以通过三角函数算出a的值，数学公式 $tan36°=a/b$，转化为js公式为：

a = b * Math.tan(36/180*Math.PI)

其中 tan36° = 0.7265425280053608，示例如下：

五角星

.five-pointed-star,
.five-pointed-star::before,
.five-pointed-star::after{
    width: 0;
    height: 0;
    border-left: var(--bw) solid transparent;
    border-right: var(--bw) solid transparent;
    border-top: calc(var(--bw) * 0.726542) solid red; 
}

.five-pointed-star{
    --bw: 100px;
    position: relative;
}
.five-pointed-star::before{
    content: '';
    position: absolute;
    transform: translate(-50%,-100%) rotate(70deg);
}
.five-pointed-star::after{
    content: '';
    position: absolute;
    transform: translate(-50%,-100%) rotate(-70deg);
}

绘制三个三角形，然后进行位移和旋转变换得到五角星，如下：

从第二张图片可以看出，顶角不是36°，离需求是有一定的出入的，如果你有更好的解决方案，可以留言讨论。

总结

这里我们需要注意的是五角星的小角是36°，如果你没有那么严格的要求，就不必深究，只需要改变--bw的值就可以改变五角星的大小了；如果要求严格且你有解决方案，欢迎留言。

想了解其他动画效果，请前往《有趣的动画》 专栏，希望对你有所帮助。