用CSS做出五角星并不難，只需要一段簡單的CSS代碼就可以實現，下面是實現五角星的CSS代碼：

.star {
display: inline-block;
position: relative;
width: 0;
height: 0;
border: 20px solid transparent;
border-bottom-color: #f6b93b;
transform: rotate(35deg);
margin-right: 5px;
}
.star:before {
content: "";
position: absolute;
top: -35px;
left: -20px;
width: 0;
height: 0;
border: 20px solid transparent;
border-bottom-color: #f6b93b;
transform: rotate(-70deg);
}
.star:after {
content: "";
position: absolute;
top: -35px;
left: 20px;
width: 0;
height: 0;
border: 20px solid transparent;
border-bottom-color: #f6b93b;
transform: rotate(70deg);
}
.star >* {
position: absolute;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: #fff;
}
.star >*:before {
content: "";
position: absolute;
top: -10px;
left: -10px;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: #fff;
}
.star >*:after {
content: "";
position: absolute;
top: -10px;
left: 10px;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: #fff;
transform: rotate(60deg);
}
.star >*:nth-child(2):before {
transform: rotate(120deg);
}
.star >*:nth-child(2):after {
transform: rotate(180deg);
}

以上代碼中的.star是五角星的外框，內部的三個*是五角星內部的填充，代碼共5個部分：

1. .star的寬高都為0，使用border屬性設置五角星邊框的大小，并使用border-bottom-color設置最底部邊框的顏色，使用transform旋轉完整的五角星。

2. .star:before和.star:after兩個偽元素使用類似的方式繪制一個又小的五角星，然后根據具體位置進行旋轉，使其固定在大五角星的左右兩端。

3. .star >*是五角星內部的填充，也就是三個小五角星。使用border屬性設置大小和邊框顏色，并使用position和left、top屬性固定位置。

4. 三個小五角星中，除了第一個以外，其他兩個需要進行旋轉，根據前面兩個偽元素的位置來確定具體旋轉角度。

5. 在HTML中，只需要添加一個類名為star的元素即可實現五角星效果。

通過這段簡單的CSS代碼，我們可以輕松地在頁面上實現五角星效果，而不需要使用圖片等其他資源，簡潔而方便。