Discussion on: CSS Battle #4 - Ups n Downs

<div class="wrapper">
  <div></div>
  <div></div>
  <div></div>
</div>

<style>
  body {
    margin: 50px;
    background: #62306D;
  }

  .wrapper {
    display: flex;
  }

  .wrapper > div {
    width: 100px;
    height: 100px;
    border-radius: 50% 50% 0 0;
    background: #F7EC7D;
  }

  .wrapper > div:nth-child(2n+1) {
    transform: rotate(180deg) translate(0, -100px);
  }
</style>