CSSBattle 16.90: Eclipse Solution

Approach

Elements: circle (three)

Stack elements with proper translate

Variables are used to avoid repetition

Result: 100% match

Implementation

1<div class="circle circle-1"></div>
2<div class="circle circle-2"></div>
3<div class="circle circle-3"></div>
4<style>
5  body {
6    margin: 0;
7    background: #f3ac3c;
8  }
9  .circle {
10    position: absolute;
11    left: 50%;
12    transform: translate(-50%, var(--y));
13    width: var(--size);
14    height: var(--size);
15    border-radius: 100%;
16  }
17  .circle-1 {
18    --y: -250px;
19    --size: 400px;
20    background: #998235;
21  }
22  .circle-2 {
23    --y: 25px;
24    --size: 250px;
25    box-sizing: border-box;
26    border: 25px solid #f3ac3c;
27    background: #1a4341;
28  }
29  .circle-3 {
30    --y: 150px;
31    --size: 400px;
32    background: #998235;
33  }
34</style>

Other Battle #16 solutions

#89 - Summit

#90 - Eclipse

#91 - Reflection

#92 - Sequeeze

#93 - Great Wall

#94 - Ripples

#95 - Pokeball

#96 - Mandala

References

Original challenge