Discussion on: CSS Battle #8 - Forking Crazy

[Syed Ali Shahzil]

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]

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

Thanks in advance!

[Syed Ali Shahzil]

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