html圣诞树代码粉色
时间: 2023-12-14 08:34:14 浏览: 135
html实现圣诞树代码
以下是一个HTML圣诞树代码,它的颜色为粉色:
```html
<!DOCTYPE html>
<html>
<head>
<title>Pink Christmas Tree</title>
<style>
body {
background-color: #f7d9e3;
}
.tree {
position: relative;
margin: 0 auto;
width: 0;
height: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 250px solid #f08080;
}
.tree:before {
content: "";
position: absolute;
top: -20px;
left: -70px;
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-bottom: 70px solid #228b22;
}
.tree:after {
content: "";
position: absolute;
top: -30px;
left: -100px;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid #228b22;
}
.star {
position: absolute;
top: -70px;
left: 75px;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 25px solid #ffd700;
transform: rotate(45deg);
}
.presents {
position: relative;
margin: 0 auto;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid #8b0000;
}
.presents:before {
content: "";
position: absolute;
top: 0;
left: -50px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid #8b0000;
}
.presents:after {
content: "";
position: absolute;
top: 0;
left: 50px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid #8b0000;
}
.present {
position: absolute;
bottom: 0;
left: -25px;
width: 50px;
height: 50px;
background-color: #ffd700;
transform: rotate(-45deg);
}
.present:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 50px;
height: 50px;
background-color: #ffd700;
transform: rotate(-45deg);
}
.present:after {
content: "";
position: absolute;
top: 0;
left: 25px;
width: 50px;
height: 50px;
background-color: #ffd700;
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div class="tree"></div>
<div class="star"></div>
<div class="presents">
<div class="present"></div>
<div class="present"></div>
<div class="present"></div>
</div>
</body>
</html>
```
阅读全文