section {
  aspect-ratio: 1;
  left: 50%;
  position: absolute;
  top: 50%;
  translate: -50% -50%;
  width: 50vmin;
  
  
  div {
    --a: 0deg;
    background: radial-gradient(circle at 50% 100%, #ff0 5%, #000 85%);
    border-radius: 100% / 50% 50% 150% 150%;
    height: 30%;
    left: 50%;
    mask: linear-gradient(#000 90%, #0000);
    position: absolute;
    top: 50%;
    transform:
      translate(-50%, -50%)
      rotate(var(--a))
      translateY(-110%)
      scale(0.8, 1.25);
    width: 12%;
    
    &:nth-child(1)  { --a:   0deg; }
    &:nth-child(2)  { --a:  20deg; }
    &:nth-child(3)  { --a:  40deg; }
    &:nth-child(4)  { --a:  60deg; }
    &:nth-child(5)  { --a:  80deg; }
    &:nth-child(6)  { --a: 100deg; }
    &:nth-child(7)  { --a: 120deg; }
    &:nth-child(8)  { --a: 140deg; }
    &:nth-child(9)  { --a: 160deg; }
    &:nth-child(10) { --a: 180deg; }
    &:nth-child(11) { --a: 200deg; }
    &:nth-child(12) { --a: 220deg; }
    &:nth-child(13) { --a: 240deg; }
    &:nth-child(14) { --a: 260deg; }
    &:nth-child(15) { --a: 280deg; }
    &:nth-child(16) { --a: 300deg; }
    &:nth-child(17) { --a: 320deg; }
    &:nth-child(18) { --a: 340deg; }
  }
}