写一段圣诞树的html代码
时间: 2023-05-28 18:01:14 浏览: 92
<!DOCTYPE html>
<html>
<head>
<title>My Christmas Tree</title>
<style>
body {
background-color: #19262E;
}
.tree {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 50px;
}
.trunk {
width: 30px;
height: 50px;
background-color: brown;
border-radius: 5px;
margin-bottom: 20px;
}
.branch {
display: flex;
justify-content: space-between;
align-items: center;
}
.green {
background-color: green;
width: 100px;
height: 50px;
border-radius: 50% 50% 0 0;
transform: rotate(45deg);
z-index: 1;
position: relative;
overflow: hidden;
box-shadow: inset -5px 5px 5px #002200, 1px 1px 1px #111;
}
.yellow {
background-color: yellow;
width: 80px;
height: 40px;
border-radius: 50% 50% 0 0;
transform: rotate(45deg);
z-index: 2;
position: relative;
overflow: hidden;
box-shadow: inset -3px 3px 3px #222, 1px 1px 1px #111;
}
.red {
background-color: red;
width: 60px;
height: 30px;
border-radius: 50% 50% 0 0;
transform: rotate(45deg);
z-index: 3;
position: relative;
overflow: hidden;
box-shadow: inset -2px 2px 2px #440000, 1px 1px 1px #111;
}
</style>
</head>
<body>
<div class="tree">
<div class="trunk"></div>
<div class="branch">
<div class="green"></div>
<div class="yellow"></div>
<div class="red"></div>
</div>
<div class="branch">
<div class="green"></div>
<div class="yellow"></div>
<div class="red"></div>
</div>
<div class="branch">
<div class="green"></div>
<div class="yellow"></div>
<div class="red"></div>
</div>
</div>
</body>
</html>
阅读全文