CSSBattle 1.4: Ups n Downs Solution

1<div></div>
2
3<style>
4  body {
5    background: #62306d;
6  }
7  div,
8  div::before,
9  div::after {
10    background: #f7ec7d;
11    width: 25vw;
12    height: 25vw;
13  }
14  div {
15    border-radius: 50% 50% 0 0;
16    margin: 0 auto;
17    transform: translateY(2.625rem);
18  }
19  div::before,
20  div::after {
21    content: "";
22    display: block;
23    border-radius: 0 0 50% 50%;
24  }
25  div::before {
26    transform: translate(-100%, 100%);
27  }
28  div::after {
29    transform: translateX(100%);
30  }
31</style>