内六角形由两个等边三角形拼合而成。
合并之后，我们可以把整体划分为若干个完全相同的小等边三角形。
在垂直方向做个辅助线，连接中间顶部和底部两点。不难发现，“垂直方向的最大长度”要大于“水平方向的最大长度”。
设小等边三角形的边长为1，以内六角形中心为坐标原点，可以计算出每个点的坐标，如下：
为了使用clip-path的百分比定位来绘制图像，下一步需要把长度坐标转换为百分比坐标。
设垂直方向最大长度为100%，仍以内六角形中心为坐标原点，每个点的坐标值转换如下：
由于clip-path绘制原点是在左上角，x轴右侧为正值，y轴下方为正值。需要做下坐标系转换。即：
新x轴坐标值 = 旧x轴坐标值 + 50%
新y轴坐标值 = (旧y轴坐标值 – 50%) * -1
使用clip-path的polygon方法绘制内六角形，坐标已通过上面的步骤计算出来了。
样式代码如下：
.sunny:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -45px 0 0 -45px;
width: 90px;
height: 90px;
background: #FFEB3B;
clip-path: polygon(
50% 0%,
65.43% 25%,
93.3% 25%,
78.87% 50%,
93.3% 75%,
64.43% 75%,
50% 100%,
35.57% 75%,
6.7% 75%,
21.13% 50%,
6.7% 25%,
35.57% 25%);
z-index: 1;
animation: sunScale 2s linear infinite;
}
@keyframes sunScale {
0% {
transform: scale(1);
}
50% {
