8 - CSSBattle - Target #5 - Acid Rain

index.html

<div>
</div>

<style>
    body {
      background: #0b2429;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  div {
    width: 120px;
    height: 120px;
    background: #998235;
    border-radius: 50%;
    border-top-right-radius:0%;
    position:relative;
  }
  
  	div::before,
    div::after {
      content: "";
      position: absolute;
      width: 120px;
      height: 120px;
      background: #f3ac3c;
    }
  
    div::before {
      left: -60px;
      top: 60px;
      border-radius: 50% 0% 50% 50%;
    }

    div::after {
      left: 60px;
      top: -60px;
      border-radius: 50%;
    }
</style>