You know what? The title says it all. Forking Crazy!
This was by far the most challenging piece of all. Even though there is another one I couldn't...
For further actions, you may consider blocking this person and/or reporting abuse
I have used box-shadow.
My solution, based on your:
Nice!! I only use box-shadow for fork pointed, other part are too abstract when use box-shadow.
By using flexbox make it easy and simple
Hey, can you tell me about your div placement corresponding to the solution you have provided?
Thanks in advance!
HTML code is not showing in the comment. How can I show the HTML code?
body{
margin:0;
background:#6592CF;
}
#rect {
width: 140px;
height: 150px;
background: #060F55;
position:absolute;
top:100px;
right:130px;
border-radius:10px 10px 70px 70px;
}
#srect{
width:20px;
height:50px;
background:#060F55;
position:absolute;
top:250px;
right:190px; //Note
}
#db1,#db2,#db3,#db4,#lb1,#lb2,#lb3{
width:20px;
height:120px;
border-radius:10px 10px 10px 10px;
position:absolute;
}
#db1,#db2,#db3,#db4{
top:50px;
background:#060F55;
}
#lb1,#lb2,#lb3{
background:#6592CF;
top:40px;
}
#db1{
right:250px
}
#db2{
right:210px;
}
#db3{
right:170px;
}
#db4{
right:130px;
}
#lb1{
right:230px;
}
#lb2{
right:190px;
}
#lb3{
right:150px;
}
body{
background: #6592CF;
}
.botrec{
background: #060F55;
height: 60px;
width:20px;
margin-top: 245px;
margin-left: 182px;
}
.circle{
background: #060F55;
height: 140px;
width: 140px;
border-radius: 100px;
margin-top: -195px;
margin-left: 122px;
}
.dbra{
background: #060F55;
height: 140px;
width: 20px;
border-radius: 100px / 100px;
margin-top: -200px;
margin-left: 122px
}
.bra{
background: #6592CF;
height: 110px;
width: 20px;
border-radius: 100px / 100px;
margin-top: -140px;
margin-left: 142px;
}
.dbrb{
background: #060F55;
height: 110px;
width: 20px;
border-radius: 100px / 100px;
margin-top: -110px;
margin-left: 162px;
}
.brb{
background: #6592CF;
height: 110px;
width: 20px;
border-radius: 100px / 100px;
margin-top: -110px;
margin-left: 182px;
}
.dbrc{
background: #060F55;
height: 110px;
width: 20px;
border-radius: 100px / 100px;
margin-top: -110px;
margin-left: 202px;
}
.brc{
background: #6592CF;
height: 110px;
width: 20px;
border-radius: 100px / 100px;
margin-top: -110px;
margin-left: 222px;
}
.dbrd{
background: #060F55;
height: 140px;
width: 20px;
border-radius: 100px / 100px;
margin-top: -110px;
margin-left: 242
}
body{
background:#6592CF;
display:flex;
align-items:center;
justify-content:center;
}
.fork-top >*{
display:flex;
gap:20px;
position:relative;
top:-45
}
div {
width: 20px;
height: 110px;
background: #060F55;
border-radius: 100vh 100vh 0 0;
}
.out-pronge{
position:absolute;
top:50;
left:150;
}
.out-pronge *{
background:#6592CF;
border-radius: 100vh;
}
.base i{
position:absolute;
width:140px;
height:100px;
bottom:50;
z-index:-1;
left:50%;
transform: translate(-50%);
background: #060F55;
border-radius: 0 0 100vh 100vh;
}
.base .b{
bottom:-10;
width:20px
}
1 div solution:
I used a grid:
A great read, yet again!