利用css制作星星图案
时间: 2023-08-18 14:21:51 浏览: 44
好的,以下是一种简单的CSS制作星星图案的方法:
HTML代码:
```html
<div class="star"></div>
```
CSS代码:
```css
.star {
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 35px solid #f8ce0b;
border-left: 50px solid transparent;
transform: rotate(35deg);
margin: 50px auto;
position: relative;
}
.star:before {
content: "";
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 35px solid #f8ce0b;
border-left: 50px solid transparent;
position: absolute;
top: -25px;
left: -55px;
transform: rotate(-70deg);
}
.star:after {
content: "";
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 35px solid #f8ce0b;
border-left: 50px solid transparent;
position: absolute;
top: -25px;
left: 55px;
transform: rotate(70deg);
}
```
通过设置伪元素:before和:after,可以让星星变得更加真实。您可以通过调整上述代码中的属性值来调整星星的大小和位置。