用css html帮我画个五角星和上一个不一样
时间: 2023-07-15 16:14:51 浏览: 46
当然可以,以下是一个用 CSS 和 HTML 画五角星的例子:
```html
<div class="star"></div>
```
```css
.star {
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 35px solid #f5d76e;
border-left: 50px solid transparent;
transform: rotate(35deg);
position: relative;
top: 50px;
}
.star:before {
content: "";
position: absolute;
top: -35px;
left: -50px;
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 35px solid #f5d76e;
border-left: 50px solid transparent;
transform: rotate(-70deg);
}
```
这是一个黄色的五角星,其形状和之前的例子有所不同。通过使用 `border` 属性来绘制三角形,然后旋转和定位它们以形成五角星。
相关问题
用css html帮我画个五角星
当然可以,以下是一个基本的五角星的 CSS 代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.star {
display: block;
width: 0px;
height: 0px;
border-right: 50px solid transparent;
border-bottom: 35px solid #ffc107;
border-left: 50px solid transparent;
transform: rotate(35deg);
margin: 50px auto;
}
.star:before {
content: "";
display: block;
width: 0px;
height: 0px;
border-right: 50px solid transparent;
border-bottom: 35px solid #ffc107;
border-left: 50px solid transparent;
position: relative;
top: -35px;
transform: rotate(-70deg);
}
</style>
</head>
<body>
<div class="star"></div>
</body>
</html>
```
你可以在自己的网页中复制这段代码,或者单独将CSS代码提取出来使用。
使用 html 和 css 绘制一个五角星
好的,以下是使用 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 属性进行旋转和定位。你可以将颜色和大小等属性进行调整,以适应你的需求。