CSSBattle 16.90: Eclipse Solution

Variables, stacking, border, translate

target output

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

Comments

Loading comments...

Tags

css

cssbattle

Next Post

CSSBattle 16.89: Summit

Oct 28, 2021

Pseudo-element, overflow, clip path

Previous Post

CSSBattle 15.85: Pythagoras

Oct 14, 2021

Pseudo-element, transform

HoningJS

Search Posts