在CSS中,制作五角星可以使用偽元素和邊框顏色的方法來實現。下面是示例代碼:
.star { position: relative; width: 0; height: 0; border-style: solid; border-width: 0 25px 40px 25px; border-color: transparent transparent #f00 transparent; } .star:after { content: ""; position: absolute; top: -30px; left: -25px; width: 0; height: 0; border-style: solid; border-width: 0 25px 40px 25px; border-color: transparent transparent #f00 transparent; transform: rotate(35deg); }
這段代碼首先創建一個三角形,然后使用偽元素創建一個旋轉的三角形。border-color屬性決定了邊框的顏色,其中#f00代表紅色。通過微調邊框的寬度和高度,可以調整五角星的大小。
要使用這個樣式,只需要在HTML中添加一個類名為“star”的元素:
<div class="star"></div>
這樣就可以在頁面上看到一個亮紅色的五角星了。
上一篇CSS五個六邊形怎么排列
下一篇html 跑馬燈設置