CSSBattle 1.8: Forking Crazy Solution

Position, translate
1<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 }
22
23 .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 }
33
34 .head {
35 position: absolute;
36 width: 100%;
37 display: flex;
38 justify-content: space-between;
39 }
40
41 .head div {
42 width: 20px;
43 height: 20px;
44 background: #060f55;
45 border-radius: 100% 100% 0 0;
46 transform: translateY(-50%);
47 }
48
49 .mid {
50 display: flex;
51 justify-content: space-evenly;
52 }
53
54 .mid div {
55 position: relative;
56 width: 20px;
57 height: 90px;
58 background: #6592cf;
59 }
60
61 .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 }
70
71 .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 }
81
82 .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.

Next Post

CSSBattle 1.7: Leafy Trail

Jul 12, 2021

Center, translate

Previous Post

LeetCode: Isomorphic Strings

Jul 12, 2021

Use 2 hash tables

HoningJS

Search Posts