JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<div class="level1">
  <div class="triangle-down one">1/2/3/4/5/6/7/8/9/</div>
  <div class="triangle-down two">2</div>
  <div class="triangle-down three"></div>
  <div class="triangle-down four"></div>
  <div class="triangle-down five"></div>
  <div class="triangle-down six"></div>
</div>


<div id="pacman"></div>

SCSS

.level1 {
  position: relative;
  margin: 50px 0 0 50px;
  .triangle-down {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 50px solid #555;
    border-radius: 50%;
    &.one {
      transform: rotate(135deg);
      top: 50px;
      left: 18px;
    }
    &.two {
      transform: rotate(82deg);
      top: 28px;
      left: 25px;
    }
     &.three {
      transform: rotate(29deg);
    top: 9px;
    left: 12px;
    }
     &.four {
      transform: rotate(-24deg);
    top: 8px;
    left: -11px;
    }
     &.five {
      transform: rotate(-77deg);
    top: 26px;
    left: -25px;
    }
     &.six {
      transform: rotate(82deg);
      top: 28px;
      left: 25px;
    }
  }
}


    
    #pacman {
       width: 0px;
    height: 0px;
    border-right: 250px solid #da1b60;
    border-top: 250px solid #ff000000;
    border-left: 250px solid #ff000000;
    border-bottom: 250px solid #ff000000;
    border-top-left-radius: 250px;
    border-top-right-radius: 250px;
    border-bottom-left-radius: 250px;
    border-bottom-right-radius: 250px;
    }