CSSBattle 16.96: Mandala Solution
Multiple background images, gradientApproach
Background images: 1 for container, 4 for circles, 1 for last background
Result: 100% match
Implementation
1<style>2 body {3 background: radial-gradient(4 100px circle at center,5 transparent 100px,6 #243d837 ), radial-gradient(8 85px circle at 125px 50%,9 transparent 65px,10 #243d83 0 85px,11 transparent12 ), radial-gradient(13 85px circle at 50% 75px,14 transparent 65px,15 #243d83 0 85px,16 transparent17 ), radial-gradient(18 85px circle at 275px 50%,19 transparent 65px,20 #243d83 0 85px,21 transparent22 ), radial-gradient(23 85px circle at 50% 225px,24 transparent 65px,25 #243d83 0 85px,26 transparent27 ), linear-gradient(to right, #6592cf, #6592cf);28 }29</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.