<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圣诞树</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #002b36;
margin: 0;
font-family: Arial, sans-serif;
}
.tree {
position: relative;
width: 0;
margin: auto;
}
.tree .star {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
color: gold;
font-size: 20px;
}
.tree .layer {
position: relative;
width: 0;
margin: 0 auto;
border-style: solid;
border-color: transparent transparent green transparent;
}
.tree .layer:nth-child(1) {
border-width: 0 50px 50px 50px;
}
.tree .layer:nth-child(2) {
border-width: 0 70px 60px 70px;
top: -40px;
}
.tree .layer:nth-child(3) {
border-width: 0 90px 70px 90px;
top: -80px;
}
.tree .layer:nth-child(4) {
border-width: 0 110px 80px 110px;
top: -120px;
}
.tree .layer:nth-child(5) {
border-width: 0 130px 90px 130px;
top: -160px;
}
.tree .trunk {
position: relative;
width: 30px;
height: 60px;
background-color: brown;
margin: 0 auto;
top: -200px; /* Adjust based on the height of your tree layers */
}
</style>
</head>
<body>
<div class="tree">
<div class="star">★</div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="trunk"></div>
</div>
</body>
</html>
