< Back to Frontend Friday Folks Index

Forking Crazy

Visit the official puzzle page (affiliate link!) to play it yourself. If you buy a course from CSSBattle through my affiliate link, I receive a share of it!

Highlighted solution (948 characters)
1 
<div class="r">
2 
  <div class="a"></div>
3 
  <div class="b o"></div>
4 
  <div class="c"></div>
5 
  <div class="d o"></div>
6 
  <div class="e"></div>
7 
  <div class="f o"></div>
8 
  <div class="g"></div>
9 
</div>
10 
<div class="l"></div>
11 
<style>
12 
  body {margin:0;background:#6592CF;}
13 
  .r {
14 
    background: #060F55;
15 
    position: absolute;
16 
    top: calc(50px + 25px);
17 
    left: calc(50% - calc(140px / 2));
18 
    display: flex;
19 
    height: 175px;
20 
    width: 140px;
21 
    border-radius: 0 0 140px 140px;
22 
  }
23 
  .r > * {position: absolute;top: -25px; background: #060F55; width: 20px; height: 25px;border-radius: 50% 50% 0 0;}
24 
  .r > .o {top: -25px; background: #6592CF; width: 20px; height: 110px;border-radius: 0 0 calc(20px / 2) calc(20px / 2);}
25 
  .b {left: 20px}
26 
  .c {left: 40px}
27 
  .d {left: 60px}
28 
  .e {left: 80px}
29 
  .f {left: 100px}
30 
  .g {left: 120px}
31 
  .l {position: absolute;background:#060F55;left:calc(50% - 10px); width:20px; height: 50px; bottom: 0}
32
33 
</style>
This solution is definitely a bit older and I would probably do it differently today. At least use the nesting feature of CSS.
< Back to Frontend Friday Folks Index