在CSS中,我們可以通過(guò)使用border
屬性來(lái)繪制一個(gè)五角星,以下是一個(gè)簡(jiǎn)單的示例:
<div class="star"></div>
.star { position: relative; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }
在這個(gè)示例中,我們創(chuàng)建了一個(gè)div
元素,并給它添加了一個(gè)類(lèi)名star
,我們使用CSS的border
屬性來(lái)繪制一個(gè)五角星。border-left
和border-right
屬性分別設(shè)置了左右兩邊的邊框?qū)挾?,?code>border-bottom屬性則設(shè)置了底邊的邊框?qū)挾龋@樣,我們就可以得到一個(gè)紅色的五角星了。
如果你想要改變五角星的顏色,只需要修改border-bottom
屬性的顏色值即可,如果你想要一個(gè)藍(lán)色的五角星,可以將顏色值改為blue
:
.star { position: relative; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue; }
這樣,你就得到了一個(gè)藍(lán)色的五角星了,如果你想要更大或更小的五角星,只需要調(diào)整border-left
、border-right
和border-bottom
屬性的值即可。