在CSS中,我們可以使用一些技巧來畫出各種形狀,包括星號。下面是用CSS畫五角星的方法,我們可以通過修改一些參數來繪制不同大小的星星:
.star{ position:relative; display:inline-block; width:0; height:0; margin:0 5px; border:6px solid transparent; border-bottom-color:#FAC002; } .star:before{ content:""; display:block; position:absolute; top:-12px; left:-12px; width:0; height:0; margin:0; border:6px solid transparent; border-right-color:#FAC002; } .star:after{ content:""; display:block; position:absolute; top:-12px; left:12px; width:0; height:0; margin:0; border:6px solid transparent; border-left-color:#FAC002; }
其中,.star表示星星的類名,我們使用了三個元素:本身的元素,和兩個偽元素。我們通過設置border參數來繪制出五角星的形狀,通過設置position、margin、width、height等參數來調整位置和大小。其中,偽元素的使用,是為了繪制出星星的兩條斜邊。
通過調整參數,我們還可以畫出更小或更大的星星,貼近需要的場景。希望這個方法能對有需要的讀者有所幫助。