<!-- https://cssbattle.dev/play/6 -->
<!-- 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 {
  width: 400px;
  height: 300px;
  z-index: -1000;
}

/* Put the following in the CSS Battle */
body {
  margin: 0;
  background: #e3516e;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.one,
.two,
.three {
  width: 100px;
  height: 100px;
}
.one {
  background: #51b5a9;
  border-radius: 100% 0 0 0;
  place-self: end;
}
.two {
  background: #fade8b;
  border-radius: 0 100% 0 0;
  place-self: end start;
}
.three {
  background: #f7f3d7;
  border-radius: 0 0 0 100%;
  place-self: start end;
}