Discussion on: CSS Battle #8 - Forking Crazy

View post
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;

}