#cssbattle.dev #Solved - 25 june, 2021, Battle #1 - Pilot Battle - Forking Crazy

forking crazy- crazed!!.html

<div class='c c1'></div>
<div class='c c2'></div>
<div class='c c3'></div>
<div class='c c4'></div>

<div class='sky-blue-upside-down-strip s1'></div>
<div class='sky-blue-upside-down-strip s2'></div>
<div class='sky-blue-upside-down-strip s3'></div>

<div class='fork-upper-rectangle'></div>
<div class='fork-lower-stick'></div>

<style>
  body{
    background: #6592CF;
  }
  .c{
    position: absolute;
    z-index: 5;
    background: #060F55;
    top: 50px;
    left: 120px;
    height: 20px;
    width: 20px;
    border-radius: 100%;
  }
  .c1{
    left: 130px;
  }
  .c2{
    left: 170px;
  }
  .c3{
    left: 210px;
  }
  .c4{
    left: 250px;
  }
  .fork-upper-rectangle{
    --val1: 1000000000px;
    margin: 60 auto 0px auto;
    height: 190px; 
    width: 140px;
    background: #060F55;
    border-radius: 0 0 var(--val1) var(--val1);
  }
  .fork-lower-stick{
	position: absolute;
    background: #060F55;
    width: 20px;
    height: 100px;
    bottom: 0;
    left: 190px;
  }
  .sky-blue-upside-down-strip{
    position: absolute;
    width: 20px;
    height: 160px;
    background: #6592CF;
    z-index: 1;
    top: 0;
    border-radius: 0 0 20px 20px;
  }
  .s1{
    left: 150px;
  }
  .s2{
    left: 190px;
  }
  .s3{
    left: 230px;
  }

  
</style>