CSS绘制正五角星原理（数学模型）
尽管网上有很多CSS绘制五角星的代码案例，但是对于初学者来说可以拿来移植使用，但是在不明白其原理的情况下，进行修改移植就比较困难了。譬如想要将五角星尺寸进行缩小或者放大等设计，就需要对原代码相关数据进行修改。如果不清楚代码实现时的原理，就无法对代码的各项数据进行正确的改动维护。和CSS绘制三角形的原理一样，CSS绘制五角星同样也是从数学模型上着手才能明白各项参数的作用，以及各项参数之间的关联关系。
基于三个特殊角度的全等三角形旋转构建正五角星
根据正五角星的数学特性，正五角星可以由特殊角度的三角形绕五角星外接圆圆心经过旋转72°与-72°而实现。满足正五角星的特征的特殊三角形△aEB的角度为36°、36°、108°。该三角形在三个位置的图案即组成满足要求的正五角星。
数学模型：过五角星ABCDE外接圆圆心O做BE的垂线，垂足为L。假设BE长度为t，五角星外接圆半径为R。用R表示t与线段OL的长度。
根据正五角星的数学特性,∠EOL=72°，∠0EL=18°，L为BE的中点，那么简单的三角函数关系：
OL/(t/2)=tan18°
即：
OL=R·sin18°
t=2R·cos18°
OL的值为三角形旋转基点的垂直数值。
tan18°=(√5-1)/√(10+2√5)≈0.32491969623291
cos18°=√(10+2√5)/4≈0.95105651629515
正五角星外接圆R=60px与正五角星边长则为：114.126px，根据几何关系△aEB的边长为217.08px、134.16px、134.16px。
根据CSS绘制三角形原理，可以获得绘制三角形的重要数据：78.86、108.54、108.54。参见CSS绘制三角形原理查看获取三个参数的计算过程。
HTML代码：
<div class='pentagram'>
</div>
CSS代码：
.pentagram {
width:0;
height:0;
border-top-color: red;
border-left-color: transparent;
border-right-color: transparent;
border-top-width: 78.86px;
border-left-width: 108.54px;
border-right-width: 108.54px;
border-style:solid;
}
采用伪元素的方式在父元素的位置绘制等大小的三角形，需要在父元素设置相对定位。
.pentagram {
position:relative;
}
采用伪元素的方式实现代码：
.pentagram::before {
border-width:0;
content: '';
display: block;
width: 0;
height: 0;
border-top-color: red;
border-left-color: transparent;
border-right-color: transparent;
border-top-width: 78.86px;
border-left-width: 108.54px;
border-right-width: 108.54px;
border-style: solid;
position:absolute;
top:-78.86px;
left:-108.54px;
}
.pentagram::after{
border-width:0;
content: '';
display: block;
width: 0;
height: 0;
border-top-color: red;
border-left-color: transparent;
border-right-color: transparent;
border-top-width: 78.86px;
border-left-width: 108.54px;
border-right-width: 108.54px;
border-style: solid;
position:absolute;
top:-78.86px;
left:-108.54px;
}
确定旋转中心点位置数据：108.54px 35.26px元素旋转是以元素的border-box盒模型来确定相关数值的，左上角为0 0。
所以最终完整的代码如下：
* {
border: none;
border-width:0;
margin:0;
}
.pentagram {
margin:100px;
width: 0;
height: 0;
border-top-color: red;
border-left-color: transparent;
border-right-color: transparent;
border-top-width: 78.86px;
border-left-width: 108.54px;
border-right-width: 108.54px;
border-style: solid;
/* 相对定位是与绘制三角形无关 */
position: relative;
}
.pentagram::before {
border-width:0;
content: '';
display: block;
width: 0;
height: 0;
border-top-color: red;
border-left-color: transparent;
border-right-color: transparent;
border-top-width: 78.86px;
border-left-width: 108.54px;
border-right-width: 108.54px;
border-style: solid;
position:absolute;
top:-78.86px;
left:-108.54px;
transform:rotate(72deg);
transform-origin:108.54px 35.26px;
}
.pentagram::after{
border-width:0;
content: '';
display: block;
width: 0;
height: 0;
border-top-color: red;
border-left-color: transparent;
border-right-color: transparent;
border-top-width: 78.86px;
border-left-width: 108.54px;
border-right-width: 108.54px;
border-style: solid;
position:absolute;
top:-78.86px;
left:-108.54px;
transform:rotate(-72deg);
transform-origin:108.54px 35.26px;
}
注意：虽然在CSS通配符中设置了border-width值为0，但是伪元素中若不设置border-width:0; 在chorme和UC浏览器中测试会导致伪元素中出现默认的3px宽黑色边框，似乎是一个 bug。
