Ups n Downs

<div></div>
<div></div>
<div></div>
<style>
  body {
    background: #62306d;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  div {
    translate: 0 50%;
    width: 100px;
    height: 100px;
    background: #f7ec7d;
    border-radius: 0 0 50px 50px;
  }

  div:nth-of-type(2) {
    translate: 0 -50%;
    border-radius: 50px 50px 0 0;
  }
</style>