Discussion on: CSS Battle: #5 - Acid Rain

[Supportic]

  body{background:#0B2429;display:grid;place-items:center;}
  div {
    width: 120px; height: 120px;
    background: #998235;
    border-radius: 50% 0 50% 50%;
    position: relative;
  }
  div::before,
  div::after{
    content: '';
    width: 120px; height: 120px;
    background: #F3AC3C;
    position: absolute;
  }
  div::before{
    z-index: 1;
    inset: 50% 0 0 -50%;
    border-radius: 50% 0 50% 50%;
  } 
  div::after{
    z-index: -1;
    inset: -50% 0 0 50%;
    border-radius: 50% 50% 50% 50%;
  }

[Jatin Sharma]

That's also a good solution. Thanks for the solution. Just add the respective codepen :)

[Gass]

I didn't know about the place-items:center property. Very useful, thanks.

[Jatin Sharma]

It is very useful when you need to center a child container vertically and horizontally.

If you wish to learn more about how to center divs then check the the following article it showcase the 6 different ways you can center a child container-

• 6 ways to center a div

[Gass]

thanks ;)