Battle #4.html

<div class="a">
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
  </div>
  <style>
    body{
      background:#62306D;
    }
    .a{
      display:flex;
      justify-content:center;
      align-items:center;
    }
    
    .b{
      width:100px;
      height:100px;
      background:#F7EC7D;
      border-radius: 65px 65px 0 0;
      top:50%;
      left:50%;
      position:absolute;
      transform:translate(-50%,-100%);
    }
    .c{
      width:100px;
      height:100px;
      background:#F7EC7D;
      border-radius: 0 0 65px 65px;
      top:83.2%;
      left:75%;
      position:absolute;
      transform:translate(-50%,-100%);
    }
    .d{
      width:100px;
      height:100px;
      background:#F7EC7D;
      border-radius: 0 0 65px 65px;
      top:83.5%;
      left:25%;
      position:absolute;
      transform:translate(-50%,-100%);
    }
  </style>