使用 html 和 css 绘制一个五角星
时间: 2024-03-12 11:49:40 浏览: 143
js+canvas绘制五角星的方法.docx
好的,以下是使用 HTML 和 CSS 绘制一个五角星的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Five-Pointed Star</title>
<style>
.star {
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 35px solid #FDB813;
border-left: 50px solid transparent;
transform: rotate(35deg);
position: absolute;
top: 50%;
left: 50%;
margin-top: -17.5px;
margin-left: -25px;
}
.star::before {
content: "";
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 17px solid #FDB813;
border-left: 50px solid transparent;
position: absolute;
top: -17px;
left: -50px;
transform: rotate(-35deg);
}
</style>
</head>
<body>
<div class="star"></div>
</body>
</html>
```
这里我们使用了 `::before` 伪元素来绘制五角星的上半部分,然后使用 transform 属性进行旋转和定位。你可以将颜色和大小等属性进行调整,以适应你的需求。
阅读全文