DEV Community

CSS Battle #8 - Forking Crazy

Olzhas Askar on July 08, 2019

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...

Read full post

Beloron247 • Dec 23 '20

I have used box-shadow.

p {
    margin:50px auto;
    width:20px;
    height:110px;
    border-radius:100px;
    background:#6592CF;
    box-shadow:20px 0 #060F55,
                -20px 0 #060F55,
                40px 0 #6592CF,
                -40px 0 #6592CF,
                60px 0 #060F55,
                -60px 0 #060F55,
                0 -190px 0 100px #6592CF,
                0 30px 0 60px #060F55,
                0 150px 0 #060F55,
                0 0 0 400px #6592CF;
  }

wavesforthemasses • Feb 3 '21

My solution, based on your:

<p><style>*{background:#6592CF}p{zoom:10;margin:5 auto;width:2;height:11;border-radius:1in;box-shadow:2px 0#060F55,-2px 0#060F55,4px 0#6592CF,-4px 0#6592CF,6px 0#060F55,-6px 0#060F55,0-19px 0 10px#6592CF,0 3px 0 6px#060F55,0 15px 0#060F55

zizifn • Dec 29 '20

Nice!! I only use box-shadow for fork pointed, other part are too abstract when use box-shadow.

Syed Ali Shahzil • Feb 23 '21 • Edited

By using flexbox make it easy and simple


div id="a"
    div id= "a1" div
    div id="a2"  div
    div id= "a1" div
    div id="a2"  div
    div id= "a1" div
    div id="a2"  div
    div id= "a1" div
 div
 div id="b" div
 div id="c" div



  body {
    margin: 0;
    background: #6592CF;
    display:flex;
    align-items:center;
    padding-top:50px;
    flex-direction:column;
    position:relative;
   
    
  }
  #a {
    display:flex;
    align-items:center;
    flex-direction:row;
  }
  #a1{
   width:20px;
   height:100px;
   background:#060F55;
   border-radius:10px 10px 0px 0px;
  }
  #a2{
   width:20px;
   border-radius:0px 0px 10px 10px;
   height:110px;
   margin-bottom:-10px;
   background:#6592CF;
   z-index:2;
  }
  #b{
    width:140px;
    height:100px;
    background:#060F55;
    border-radius:0px 0px 75px 75px;
  }
  #c{
    margin-top:-2px;
    width:20px;
    height:150px;
    background:#060F55;
    position:absoulte;
    z-index:3;
  }

UniversalXeno • May 16 '21

Hey, can you tell me about your div placement corresponding to the solution you have provided?

Thanks in advance!

Syed Ali Shahzil • May 16 '21

HTML code is not showing in the comment. How can I show the HTML code?

aaryansinha16 • Jan 19 '22

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;
}

Gowrav-Kumar • May 26 '21

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
}

cpcjain • Jul 28 '22 • Edited

`<div class="fork">
  <div class="dblue"></div>
   <div class="lblue"></div>
   <div class="dblue"></div>
   <div class="lblue"></div>
   <div class="dblue"></div>
   <div class="lblue"></div>
   <div class="dblue"></div> 
</div>
 <div class="semi-circle"></div>
<div class="handle"></div>
<style>

  .fork{
    position: absolute;
    top: 50px;
    left: 131px;
    height: 150px;
    width: 140px;
    background-color:#6592CF;
    display: flex;
    flex-direction: row;
  }
  body{
    background-color:#6592CF;
    margin:0;
    padding: 0;
    box-sizing: border-box;
  }
  .dblue{
    height:112px;
    width: 20px;
    background-color:#060F55;
    border-radius: 25px 25px 0 0;

  }
  .lblue{
    height:110px;
    width: 20px;
    background-color:#6592CF;
    border-radius: 0 0 25px 25px;
    z-index: 1;
  }
  .semi-circle{
   height: 150px;
    width: 140px;
    position: absolute;
    left: 131px;
    top: 100px;
    border-radius: 0 0 50% 50%;
     background-color:#060F55;
    }
  .handle{
    width: 5vw;
    height: 75px;
    position: absolute;
    bottom:0;
    left: 190px;
    background-color:#060F55
  }
</style>`

Subash Karki • Aug 21 '22

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

}

Nancy Do • Jan 30 '22

1 div solution:

<div></div>

<style>
  body {
    background: #6592CF;
  }

  *::after, *::before {
    position: fixed;
    content: "";
    background: #060F55;
  }

   div {
    margin: 110px 122px;
    width: 140px;
    height: 140px;
    background: #060F55;
    border-radius: 0 0 50% 50%;
  }

    div::after {
    color: #060F55;
    margin: -60px 0;
    width: 20px; 
    height: 110px; 
    border-radius: 30px 30px 30px 30px;
    box-shadow: 
      20px 0 #6592CF,
      40px 0,
      60px 0 #6592CF,
      80px 0,
      100px 0 #6592CF,
      120px 0;
  }

  div::before {
    margin: 130px 60px;
    width: 20px; 
    height: 70px;
  }

</style>

Philgood7 • Jul 12 '22

I used a grid:

"div class="cont"
  (div id="A" class="clair")(/div)
  (div id="B" class="clair")(div class="bu")(/div)(/div) 
  (div id="C" class="foncé") (div class="bd")(/div)(/div) 
  (div id="D" class="clair")(div class="bu")(/div)(/div)
  (div id="E" class="foncé")(div class="bd")(/div)(/div)
  (div id="F" class="clair")(div class="bu")(/div)(/div)
  (div id="G" class="foncé")(div class="bd")(/div)(/div)
  (div id="H" class="clair")(div class="bu")(/div)(/div)
  (div id="I")(div class="Q")(/div)(/div)
  (div id="J" class="foncé")(/div)
(/div)

(style)

*{margin:0;

padding:0;}

body{background:#6592CF;}

.clair{background:#6592CF;}

.foncé{background:#060F55;}

.cont{

    display:grid;

    grid-template-columns: repeat(7,20px);

  grid-template-rows: 50px 110px 90px 50px;

  grid-template-areas: 

    "a a a a a a a"

    "b c d e f g h"

    "i i i i i i i"

    "k k k J l l l";

  justify-content: center;

  align-content: end;


}

'#A{grid-area:a;}

'#B{grid-area:b;}

'#C{grid-area:c;}

'#D{grid-area:d;}

'#E{grid-area:e;}

'#F{grid-area:f;}

'#G{grid-area:g;}

'#H{grid-area:h;}

'#I{grid-area:i;}

'#J{grid-area:3/4/5/5;}

/bd pour bâton down (bâton vers le bas)/

.bd{

    position: absolute;

    width: 20px;

    height: 110px;

    background: #6592CF;

    border-bottom-left-radius:10px;

    border-bottom-right-radius:10px;

    z-index:7;

   }

/bd pour bâton up (bâton vers le haut)/

.bu{

    position: absolute;

    width: 20px;

    height: 110px;

    background: #060F55;

    border-top-left-radius:10px;

    border-top-right-radius:10px;

    z-index:7;

   }

/* Q pour le cul de la fourchette, la partie basse*/

.Q{

    position: absolute;

    width: 140px;

    height: 90px;

    background: #060F55;

    border-bottom-left-radius:70px;

    border-bottom-right-radius:70px;

    z-index:7;

}

Kushagra Gour • Jul 8 '19

A great read, yet again!