CSSBattle 15.83: Supernova Solution
Grid, transformsApproach
5 stacked items: 4 half circles and 1 circle
For each of 4 half circles, use
rotate
and translateY
to placeResult: 100% match
Implementation
1<div class="container">2 <div class="half-circle"></div>3 <div class="half-circle"></div>4 <div class="half-circle"></div>5 <div class="half-circle"></div>6 <div class="circle"></div>7</div>8<style>9 body {10 margin: 0;11 background: #243d83;12 display: flex;13 height: 100%;14 justify-content: center;15 align-items: center;16 }17 .container {18 display: grid;19 place-items: center;20 }21 .half-circle {22 grid-area: 1/1;23 width: 100px;24 height: 50px;25 background: #6592cf;26 border-top-left-radius: 100px;27 border-top-right-radius: 100px;28 }29 .half-circle:nth-child(1) {30 transform: rotate(-45deg) translateY(-85px);31 }32 .half-circle:nth-child(2) {33 transform: rotate(45deg) translateY(-85px);34 }35 .half-circle:nth-child(3) {36 transform: rotate(135deg) translateY(-85px);37 }38 .half-circle:nth-child(4) {39 transform: rotate(-135deg) translateY(-85px);40 }41 .circle {42 grid-area: 1/1;43 background: #eeb850;44 width: 60px;45 height: 60px;46 border-radius: 100%;47 }48</style>
Other Battle #15 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.