<!-- https://cssbattle.dev/play/5 -->
<!-- 100% Match -->

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

/* ONLY FOR CODEPEN */
html {
  display: grid;
  place-content: center;
  height: 100%;
  background: #333;
}

body {
  position: relative;
  width: 400px;
  height: 300px;
  z-index: -1000;
}

/* Apply The following CSS */
body {
  margin: 0;
  background: #0b2429;
  display: grid;
  place-items: center;
}

.one,
.two,
.three {
  position: absolute;
  width: 120px;
  height: 120px;
  background: #998235;
  border-radius: 50% 0 50% 50%;
}
.one,
.three {
  background: #f3ac3c;
}
.one {
  left: 20%;
  top: 50%;
  z-index: 11;
}
.two {
  z-index: 10;
  left: 35%;
  top: 30%;
}
.three {
  transform: rotate(180deg);
  left: 50%;
  top: 10%;
  z-index: 9;
}