用html，css画一个好看的圣诞树

你好！

这是一个使用 HTML 和 CSS 画一个圣诞树的示例：

HTML:

<div id="christmas-tree">
  <div class="tree-trunk"></div>
  <div class="tree-top">
    <div class="star"></div>
    <div class="branch"></div>
    <div class="branch"></div>
    <div class="branch"></div>
    <div class="branch"></div>
    <div class="branch"></div>
    <div class="branch"></div>
  </div>
</div>

CSS:

#christmas-tree {
  position: relative;
  width: 200px;
  height: 400px;
  margin: 0 auto;
}

.tree-trunk {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 20px;
  height: 100px;
  background: #8b4513;
  border-radius: 10px 10px 0 0;
}

.tree-top {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 200px;
  height: 200px;
  background: linear-gradient(#228b22, #006400);
  border-radius: 100px 100px 0 0;
}

.star {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 40px;
  height: 40px;
  background: yellow;
  border-radius: 20px;
}

.branch {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 40px;
  height: 40px;
  background: linear-gradient(#228b22, #006400);
  border-radius: 20px;
}

.branch:nth-of-type(2) {
  top: 60px;
  left: 25%;
  transform: translate(-50%, 0);
}

.branch:nth-of-type(3) {
  top: 60px;
  left: 75%;
  transform: translate(-50%, 0);
}

.branch:nth-of-type(4) {
  top: 100px;
  left: 12.5%;
  transform: translate(-50%, 0);
}

.branch:nth-of-type(5) {
  top: 100px;
  left: 37.5%;
  transform: translate(-50%, 0);
}

.branch:nth-of-type(6) {
  top: 100px;
  left: 62.5%;
  transform: translate(-50%, 0);
}

.branch:nth-of-type(7) {
  top: 100px;
  left: 87.5%;