CSS（層疊樣式表）是Web開發(fā)中不可或缺的一環(huán)，它不僅可以美化網(wǎng)頁，還能增強網(wǎng)頁的交互體驗。今天，我們來學(xué)習(xí)如何使用CSS畫出一個五角星。

.star{
margin: 0 auto;
position: relative;
width: 0;
height: 0;
border-right: 100px solid transparent;
border-bottom: 70px solid #fcd016;
border-left: 100px solid transparent;
transform: rotate(35deg);
-webkit-transform: rotate(35deg);
}
.star:before{
content: "";
position: absolute;
top: -48px;
left: -115px;
width: 0;
height: 0;
border-right: 100px solid transparent;
border-bottom: 70px solid #fcd016;
border-left: 100px solid transparent;
transform: rotate(-70deg);
-webkit-transform: rotate(-70deg);
}
.star:after{
content: "";
position: absolute;
top: -48px;
left: 15px;
width: 0;
height: 0;
border-right: 100px solid transparent;
border-bottom: 70px solid #fcd016;
border-left: 100px solid transparent;
transform: rotate(-35deg);
-webkit-transform: rotate(-35deg);
}
.star2{
margin: 50px auto;
position: relative;
width: 0;
height: 0;
border-right: 100px solid transparent;
border-bottom: 70px solid #fcd016;
border-left: 100px solid transparent;
transform: rotate(125deg);
-webkit-transform: rotate(125deg);
}
.star2:before{
content: "";
position: absolute;
top: -48px;
left: -115px;
width: 0;
height: 0;
border-right: 100px solid transparent;
border-bottom: 70px solid #fcd016;
border-left: 100px solid transparent;
transform: rotate(-70deg);
-webkit-transform: rotate(-70deg);
}
.star2:after{
content: "";
position: absolute;
top: -48px;
left: 15px;
width: 0;
height: 0;
border-right: 100px solid transparent;
border-bottom: 70px solid #fcd016;
border-left: 100px solid transparent;
transform: rotate(-35deg);
-webkit-transform: rotate(-35deg);
}

上述代碼中，我們定義了兩個類：.star 和 .star2。其中，.star 畫出了一個朝上的五角星，.star2 畫出了一個朝下的五角星。通過偽元素:before和:after的配合，我們可以在一個標簽內(nèi)畫出兩個粘連的五角星。同時，我們使用了transform屬性來進行旋轉(zhuǎn)和傾斜，通過調(diào)整參數(shù)，可以畫出不同形狀的五角星。

以上就是使用CSS畫星型的方法，希望對大家有幫助。在實際開發(fā)中，CSS的應(yīng)用還有很多，希望大家可以深入學(xué)習(xí)，發(fā)揮出CSS的無限魅力。