用html画一个五角星
时间: 2024-06-01 20:04:02 浏览: 5
画一个五角星可以使用HTML5的canvas标签,也可以使用CSS3的transform属性。以下是两种方法的示例代码:
方法一:使用canvas标签
```
<canvas id="star" width="100" height="100"></canvas>
<script>
var canvas = document.getElementById("star");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 0);
ctx.lineTo(63, 38);
ctx.lineTo(100, 38);
ctx.lineTo(70, 63);
ctx.lineTo(82, 100);
ctx.lineTo(50, 75);
ctx.lineTo(18, 100);
ctx.lineTo(30, 63);
ctx.lineTo(0, 38);
ctx.lineTo(37, 38);
ctx.closePath();
ctx.fillStyle = "#FFD700";
ctx.fill();
</script>
```
方法二:使用CSS3的transform属性
```
<div class="star"></div>
<style>
.star {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: #FFD700;
transform: rotate(35deg);
margin: 50px;
}
.star:before {
content: "";
width: 0;
height: 0;
border: 30px solid transparent;
border-right-color: #FFD700;
position: absolute;
transform: rotate(-70deg);
margin: -30px 0 0 -15px;
}
.star:after {
content: "";
width: 0;
height: 0;
border: 30px solid transparent;
border-right-color: #FFD700;
position: absolute;
transform: rotate(70deg);
margin: -30px 0 0 15px;
}
</style>
```
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)