Discussion on: CSS Battle #5 - Acid Rain

[Niraj Nandish]

Hey, I recently started doing CSS Battle as I sometimes feel doubtful of my knowledge of CSS and it also gave me a chance to practice how much of CSS I know and reinforce it. Anyways wanted to say this an amazing series you have here, I make sure I try out the different methods you put in case I didn't think of them.

Today while doing Acid Rain I saw that you didn't use ::after and ::before for this one so thought of solving the challenge using them and I did it. Here's the code incase you are interested and for others who come here:

<div></div>
<style>
  * {
    margin: 0;
    background: #0B2429;
  }
  div, div::before, div::after {
    display: inline-block;
    width: 120px;
    height: 120px;
    background: #F3AC3C;
    margin: 30 200;
    border-radius: 50%;
    content: "";
  }
  div::before {
    margin: 60 -60;
    background: #998235;
    border-radius: 50% 0 50% 50%;
  }
  div::after {
    margin: 0 -120;
    border-radius: 50% 0 50% 50%;
  }
</style>