HTML
<div class="handle"></div>
<div class="base"></div>
<div class="prong first"></div>
<div class="prong second down"></div>
<div class="prong third"></div>
<div class="prong fourth down"></div>
<div class="prong fifth"></div>
<div class="prong sixth down"></div>
<div class="prong seventh"></div>
CSS
body {
margin: 0;
background: #6592CF;
position: relative;
}
.handle {
position: absolute;
bottom: 0;
left: 48%;
content: '';
width: 20px;
height: 55px;
background: #060F55;
margin: 0 auto;
}
.base {
position: absolute;
bottom: 50px;
left: 33%;
content: '';
width: 140px;
height: 95px;
background: #060F55;
border-bottom-left-radius: 70px;
border-bottom-right-radius: 70px;
}
.prong {
position: absolute;
bottom: 132px;
content: '';
width: 20px;
height: 118px;
background: #060F55;
border-top-left-radius: 80px;
border-top-right-radius: 80px;
}
.first { left: 33%; }
.second {left: calc(33% + 20px); }
.third { left: calc(33% + 40px); }
.fourth { left: calc(33% + 60px); }
.fifth { left: calc(33% + 80px); }
.sixth { left: calc(33% + 100px); }
.seventh { left: calc(33% + 120px); }
.down {
bottom: 140px;
background: #6592CF;
transform: rotate(180deg);
}
Top comments (0)