CSSBattle 1.6: Missing Slice Solution

1<div class="container">
2  <div class="child1"></div>
3  <div class="child2"></div>
4  <div class="child3"></div>
5</div>
6<style>
7  body {
8    background: #e3516e;
9  }
10  .container {
11    width: 12.5rem;
12    height: 12.5rem;
13    position: absolute;
14    top: 50%;
15    left: 50%;
16    transform: translate(-50%, -50%);
17    display: grid;
18    grid-template-columns: repeat(2, 1fr);
19    grid-template-rows: repeat(2, 1fr);
20  }
21  .child1 {
22    background: #51b5a9;
23    border-top-left-radius: 100%;
24  }
25  .child2 {
26    background: #fade8b;
27    border-top-right-radius: 100%;
28  }
29  .child3 {
30    background: #f7f3d7;
31    border-bottom-left-radius: 100%;
32  }
33</style>