CSS是前端開發不可缺少的一部分，其中五角星作為常見的圖案之一，也是CSS練手的好選擇，下面介紹幾種常見的五角星代碼：

.star {
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 35px solid #ffdf00;
border-left: 50px solid transparent;
transform: rotate(35deg);
}
.star:before {
content: "";
width: 0;
height: 0;
position: absolute;
top: -13px;
left: -50px;
border-right: 50px solid transparent;
border-bottom: 35px solid #ffdf00;
border-left: 50px solid transparent;
transform: rotate(-35deg);
}

這是比較經典的五角星代碼，使用的是border方式，配合transform旋轉達到完美的效果。

.star {
position: relative;
width: 50px;
height: 50px;
}
.star:before {
content: '';
position: absolute;
top: 0;
left: 0.8em;
width: 0;
height: 0;
border-right: 1em solid transparent;
border-bottom: 1.8em solid #ffdf00;
border-left: 1em solid transparent;
transform: rotate(35deg);
}
.star:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-right: 1em solid transparent;
border-bottom: 1.8em solid #ffdf00;
border-left: 1em solid transparent;
transform: rotate(-35deg);
}

這段代碼也是通過制定上下左右的邊框，通過transform旋轉獲得五角星的效果，適用于不同大小的五角星。

.star {
width: 0;
height: 0;
border-width: 25px 35px 0 35px;
border-style: solid;
border-color: #ffdf00 transparent transparent transparent;
transform: rotate(35deg);
position: relative;
top: -10px;
}
.star:before {
content: "";
width: 0;
height: 0;
border-width: 0 35px 25px 35px;
border-style: solid;
border-color: transparent transparent #ffdf00 transparent;
}

這是一種較為簡單的五角星代碼，同樣使用邊框大小和顏色繪制五角星，值得一試。

總的來說，五角星代碼作為CSS中比較經典的練手項目，有很多種寫法，每種方式都有自己的特點，具有很強的可擴展性和美觀性。