css 样式花五角星
时间: 2023-08-18 14:11:58 浏览: 53
要在 CSS 中创建一个五角星样式,你可以使用伪元素 `::before` 和 `::after` 来实现。以下是一个示例代码:
```css
.star {
position: relative;
display: inline-block;
width: 0;
height: 0;
border-right: 15px solid transparent;
border-bottom: 25px solid #f7d000;
border-left: 15px solid transparent;
}
.star::before {
content: '';
position: absolute;
top: -10px;
left: -15px;
width: 0;
height: 0;
border-right: 15px solid transparent;
border-bottom: 25px solid #f7d000;
border-left: 15px solid transparent;
transform: rotate(35deg);
}
.star::after {
content: '';
position: absolute;
top: -10px;
left: -15px;
width: 0;
height: 0;
border-right: 15px solid transparent;
border-bottom: 25px solid #f7d000;
border-left: 15px solid transparent;
transform: rotate(-35deg);
}
```
你可以将上述代码应用于一个具有 `.star` 类的 HTML 元素,从而创建一个五角星样式的元素。你还可以调整 `border` 的颜色和大小来适应你的需求。