CSSBattle 1.8: Forking Crazy Solution
Position, translate1<div class="container">2 <div class="head">3 <div></div>4 <div></div>5 <div></div>6 <div></div>7 </div>8 <div class="mid">9 <div><div class="mid-head"></div></div>10 <div><div class="mid-head"></div></div>11 <div><div class="mid-head"></div></div>12 </div>13 <div class="bottom">14 <div class="bottom-first-half"></div>15 <div class="bottom-second-half"></div>16 </div>17</div>18<style>19 body {20 background: #6592cf;21 }2223 .container {24 position: absolute;25 top: 50%;26 left: 50%;27 transform: translate(-50%, -90px);28 background: #060f55;29 width: 140px;30 height: 140px;31 border-radius: 0 0 100% 100%;32 }3334 .head {35 position: absolute;36 width: 100%;37 display: flex;38 justify-content: space-between;39 }4041 .head div {42 width: 20px;43 height: 20px;44 background: #060f55;45 border-radius: 100% 100% 0 0;46 transform: translateY(-50%);47 }4849 .mid {50 display: flex;51 justify-content: space-evenly;52 }5354 .mid div {55 position: relative;56 width: 20px;57 height: 90px;58 background: #6592cf;59 }6061 .mid div .mid-head {62 position: absolute;63 width: 20px;64 height: 20px;65 background: #6592cf;66 border-radius: 0 0 100% 100%;67 bottom: 0;68 transform: translateY(50%);69 }7071 .bottom .bottom-first-half {72 position: absolute;73 width: 140px;74 height: 140px;75 background: #060f55;76 border-radius: 0 0 100% 100%;77 bottom: 0;78 z-index: -1;79 transform: translateY(50px);80 }8182 .bottom .bottom-second-half {83 position: absolute;84 width: 20px;85 height: 140px;86 background: #060f55;87 top: 50%;88 left: 50%;89 transform: translate(-50%, 50%);90 }91</style>
Comments
Loading comments...
Tags
cssbattle
css
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.