CSS中五角星的繪制原理就是利用CSS3中的偽類和邊框屬性進行繪制。首先需要了解一下CSS3中的偽類nth-child()和nth-last-child()。在CSS樣式中，偽類nth-child(n)可以選擇某一個父元素下的第n個子元素，并設置這個子元素的樣式，而nth-last-child(n)則是選擇某個父元素下最后一個子元素為倒數第n個。

.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()偽類選擇奇數個元素，使五角星內部呈現白色。