Crea un árbol de Navidad con CSS

Lo primero que necesitamos son los siguientes divs:

<div class="tree">
  <div class="shadow"></div>
  <div class="layer"></div>
  <div class="shadow"></div>
  <div class="layer"></div>
  <div class="layer"></div>
</div>

Como puede ver, hay tres capas y dos capas de sombra.

En cuanto al contenedor principal, decidí usar una transformación de escala para hacerlo un poco más grande:

tree {
  position: relative;
  margin-top: 20px;
  transform: scale(3, 3);
  top: -250px;
  left: -150px;
}

Nota: esta es una la muchas forma de hacerlo 😅

 

Entonces, el elemento de capa hará la mayor parte del trabajo para crear una forma cónica.

.tree .layer {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: green;
  clip-path: polygon(50% 5%, 100% 85%, 100% 100%, 0 100%, 0 85%);
}

Esto funciona porque en realidad genera un cuadrado, esto se convierte en un círculo y cortamos una esfera.

La capa de sombra usa el mismo patrón, pero compensamos ligeramente la esfera cónica.

.tree .shadow {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: black;
  clip-path: polygon(50% 0%, 0% 110%, 95% 100%);
  margin-top: 20px;
  margin-left: 10px;
}

Sin embargo, ahora todas las capas están apiladas una encima de la otra. Así que compensémoslos un poco.

.tree div:nth-child(1) {
  transform: translateY(5px);
  z-index: 3;
}
.tree div:nth-child(2) {
  transform: translateY(0);
  z-index: 3;
}
.tree div:nth-child(3) {
  transform: translateY(40px);
  z-index: 2;
}
.tree div:nth-child(4) {
  transform: translateY(35px);
  z-index: 2;
}
div:nth-child(5) {
  transform: translateY(70px);
  z-index: 1;
}

Y para la estrella en la parte superior, agreguemos una estrella emoji a nuestro árbol.

.tree:before {
  content: '⭐️';
  position: absolute;
  left: 42px;
  z-index: 10;
  top: -9px;
}

Dando como resultado podemos ver lo siguiente: