CSSBattle 1.7: Leafy Trail Solution

Approach

Center position

1.center {
2  position: absolute;
3  top: 50%;
4  left: 50%;
5  transform: translate(-50%, -50%);
6}

Rest styling with explicit width, height, background color and border radius

Implementation

1<div class="leaf leaf-1"></div>
2<div class="leaf leaf-2"></div>
3<div class="leaf leaf-3"></div>
4<style>
5  body {
6    background: #0b2429;
7  }
8  .leaf {
9    position: absolute;
10    top: 50%;
11    left: 50%;
12    width: 150px;
13    height: 150px;
14    border-radius: 67% 0;
15  }
16  .leaf-1 {
17    background: #1a4341;
18    transform: translate(-125px, -50%);
19  }
20  .leaf-2 {
21    background: #998235;
22    transform: translate(-50%, -50%);
23  }
24  .leaf-3 {
25    background: #f3ac3c;
26    transform: translate(-25px, -50%);
27  }
28</style>