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: