css五角星原理解释 |jquary和css实例

.star {
position: relative;
display: inline-block;
width: 0.5em;
height: 0.5em;
margin: 0.2em;
box-sizing: border-box;
border: 0.1em solid #000;
overflow: hidden;
}
.star::before,
.star::after {
content: '';
position: absolute;
width: 0.5em;
height: 0.5em;
background-color: #000;
}
.star::before {
transform: rotate(-35deg) skew(10deg);
left: -0.05em;
bottom: 0;
}
.star::after {
transform: rotate(35deg) skew(10deg);
right: -0.05em;
bottom: 0;
}
.star:nth-child(2n+1)::before,
.star:nth-child(2n+1)::after {
background-color: #fff;
}

在上述代码中，利用伪类before和after绘制了五角星的左右两个部分，通过rotate()和skew()方法调整角度，使其呈现五角星的形状。然后利用nth-child()伪类选择奇数个元素，使五角星内部呈现白色。