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

<div class="pseudo-tree">
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
</div>

<div class="border-tree">
  <div class="layer">
    <div class="cut"></div>
  </div>
  <div class="layer">
    <div class="cut"></div>
  </div>
  <div class="layer">
    <div class="cut"></div>
  </div>
</div>

.clip-tree {
  position: relative;
  margin-top: 20px;
  &:before {
    content: "⭐️";
    position: absolute;
    left: 42px;
    z-index: 10;
    top: -9px;
  }
  div {
    &:nth-child(1) {
      transform: translateY(5px);
      z-index: 3;
    }
    &:nth-child(2) {
      transform: translateY(0);
      z-index: 3;
    }
    &:nth-child(3) {
      transform: translateY(40px);
      z-index: 2;
    }
    &:nth-child(4) {
      transform: translateY(35px);
      z-index: 2;
    }
    &:nth-child(5) {
      transform: translateY(70px);
      z-index: 1;
    }
  }
  .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%);
  }
  .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;
  }
}

.pseudo-tree {
  &:before {
    content: "⭐️";
    position: absolute;
    left: 50px;
    z-index: 10;
    top: -13px;
  }
  left: 200px;
  position: relative;
  .layer {
    position: absolute;
    left: 0px;
    z-index: 2;
    &:after {
      content: " ";
      display: block;
      width: 0;
      height: 0;
      border-left: 60px solid transparent;
      border-right: 60px solid transparent;
      border-bottom: 100px solid green;
      border-radius: 50%;
      position: relative;
      z-index: 2;
    }
    &:before {
      content: " ";
      display: block;
      border-left: 60px solid transparent;
      border-right: 60px solid transparent;
      border-bottom: 100px solid black;
      border-radius: 99.99%;
      border-top-left-radius: 100%;
      border-top-right-radius: 100%;
      position: absolute;
      top: 1.1rem;
      left: 0;
      z-index: 1;
      transform: scale(0.74);
    }
    &:last-child {
      &:before {
        display: none;
      }
    }
    &:nth-child(1) {
      top: 0px;
      z-index: 9;
    }
    &:nth-child(2) {
      top: 30px;
      z-index: 8;
    }
    &:nth-child(3) {
      top: 60px;
      z-index: 7;
    }
  }
}

.border-tree {
  position: relative;
  box-sizing: border-box;
  left: 450px;
  &:before {
    content: "⭐️";
    position: absolute;
    left: 42px;
    z-index: 10;
    top: 36px;
  }
  .layer {
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: 9;
    &:nth-child(2) {
      top: 20px;
      z-index: 8;
    }
    &:nth-child(3) {
      top: 40px;
      z-index: 7;
    }
    &:first-child {
      .cut {
        background: green;
      }
    }
    .cut {
      width: 100%;
      height: 100%;
      background: black;
      border-radius: 50%;
      border: 16px solid green;
      box-sizing: border-box;

      &:before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        background: #fff;
        opacity: 1;
        z-index: 300;
        transform: rotate(-45deg);
        top: -35%;
        left: 35%;
      }
      &:after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        background: #fff;
        opacity: 1;
        z-index: 300;
        transform: rotate(45deg);
        top: 0%;
        left: -70%;
      }
    }
  }
}