好看的圣诞树代码html
时间: 2023-12-26 16:06:21 浏览: 30
以下是一个简单的HTML代码,可以生成一个好看的圣诞树:
```html
<!DOCTYPE html>
<html>
<head>
<title>Christmas Tree</title>
<style>
body {
background-color: #000;
}
.tree {
position: relative;
width: 0;
height: 0;
margin: 100px auto;
border-left: 200px solid transparent;
border-right: 200px solid transparent;
border-bottom: 300px solid green;
}
.tree:before {
content: "";
position: absolute;
top: -150px;
left: -50px;
width: 0;
height: 0;
border-left: 250px solid transparent;
border-right: 250px solid transparent;
border-bottom: 350px solid green;
}
.star {
position: absolute;
top: -400px;
left: 175px;
width: 50px;
height: 50px;
background-color: yellow;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
</style>
</head>
<body>
<div class="tree"></div>
<div class="star"></div>
</body>
</html>
```
这段代码会生成一个绿色的圣诞树,顶部有一个黄色的星星。你可以将这段代码复制到一个HTML文件中,然后在浏览器中打开该文件,就可以看到一个好看的圣诞树了。