CSSBattle 16.90: Eclipse Solution
Variables, stacking, border, translateApproach
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
References
Comments
Loading comments...
Tags
css
cssbattle
Apply and earn a $2,500 bonus once you're hired on your first job!
Clients from the Fortune 500 to Silicon Valley startups
Choose your own rate, get paid on time
From hourly, part-time, to full-time positions
Flexible remote working environment
A lot of open JavaScript jobs!!
Fact corner: Referred talent are 5x more likely to pass the Toptal screening process than the average applicant.
Still hesitate? Read HoningJS author's guide on dealing with Toptal interview process.