CSSBattle 1.8: Forking Crazy Solution

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>