6 - CSSBattle - Target #4 - Ups n Downs

index.html

<div></div>
<div></div>
<div></div>
<style>
  body {
    background:#62306D;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  
  div {
    width:100px;
    height:100px;
    background:#F7EC7D;
  }
  
  div:nth-of-type(2n+1){
    border-radius:0% 0% 50% 50%;
    transform:translateY(50px);
  }
  
  div:nth-of-type(2n){
    border-radius:50% 50% 0% 0%;
    transform:translateY(-50px);
  }
</style>