< Back to Frontend Friday Folks Index

CSSBattle

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 (1540 characters)
1 
<div y></div>
2 
<div box></div>
3 
<div box2></div>
4 
<div bg>
5 
<div sw r></div>
6 
<div sw></div>
7 
</div>
8 
<style>
9 
  & {
10 
    background: #14313E;
11 
  }
12 
  div {
13 
    position:fixed;
14 
  }
15 
  [r] {
16 
    transform: scale(-1, 1) translate(7px);
17 
  }
18 
  [sw]{
19 
    top:71;
20 
      left:126;
21 
      right:120;
22 
    bottom:74;
23 
    background:
24 
    linear-gradient(-45deg, #14313E 8px, #0000 0) no-repeat,
25 
    linear-gradient(45deg, #0000 106px, #FFDF00 0 114px, #0000 0) no-repeat,
26 
    radial-gradient(1q, #FFDF00 6px, #0000 0) 65px 69px no-repeat,
27 
    radial-gradient(1q, #FFDF00 7px, #0000 0) 70px 64px no-repeat,
28 
    linear-gradient(-45deg, #14313E 14px, #0000 0) no-repeat,
29 
    linear-gradient(45deg, #0000 100px, #FFDF00 0 120px, #0000 0) no-repeat,
30 
    linear-gradient(45deg, #14313E 21px, #0000 0 101px, #14313E 0) 101% 101% / 85px 100px no-repeat,
31 
    linear-gradient(135deg, #0000 50px, #FFDF00 0 70px, #14313E 0) 72px 70px / 85px 100px no-repeat,
32 
    linear-gradient(45deg, #0000 85px, #14313E 0 95px, #FFDF00 0 125px, #14313E 0 135px,#0000 0) no-repeat
33 
    ;
34 
  }
35 
    [bg]{
36 
      top:70;
37 
      bottom:70;
38 
      left:103;
39 
      right:103;
40 
      background: #14313E;
41 
    }
42 
  [y]{
43 
    top:130;
44 
    left:53;
45 
    width:294;
46 
    height:40;
47 
    border-radius: 5px;
48 
    background:#ffdf00;
49 
  }
50 
  [box]{
51 
    top:75;
52 
    left:63;
53 
    width:224;
54 
    height:100;
55 
    border: 25px solid #FFDF00;
56 
    background:#FFDF00;
57 
    border-radius: 20px;
58 
  }
59 
  [box2]{
60 
    top:100;
61 
    left:88;
62 
    height:100;
63 
    width:224;
64 
    background:#14313E;
65 
    border-radius: 10px;
66 
  }
67 
</style>

We did this puzzle multiple times, because we only got 99.9% for it on the first try. This is the first try, mostly using gradients, but having the parenthesis on the sides with divs.

Highlighted solution (1662 characters)
1 
<div class="inner-parens"></div>
2 
<div class="sword-bg"></div>
3 
<div class="sword">
4 
  <div class="hilt"></div>
5 
  <div class="crossguard"></div>
6 
  <div class="blade"></div>
7 
  <div class="tip"></div>
8 
</div>
9 
<div class="sword top">
10 
  <div class="hilt"></div>
11 
  <div class="crossguard"></div>
12 
  <div class="blade"></div>
13 
  <div class="tip"></div>
14 
</div>
15
16 
<style>
17 
  &{
18 
    background:#14313E;
19 
  }
20 
  .sword.top {
21 
    transform: translate(-7px,2px) rotate(-90deg);
22 
  }
23 
  .sword {
24 
    position: fixed;
25 
    box-sizing: border-box;
26 
    left:100;
27 
    top:100;
28 
    rotate:-45deg;
29 
    display: flex;
30 
    align-items:center;
31 
    justify-content: center;
32 
    transform: translate(-9q,-1px);
33 
    & .hilt {
34 
      background: #FFDF00;
35 
      height: 20px;
36 
      width: 40px;
37 
      border-radius: 5px 0 0 5px;
38 
    }
39 
    & .crossguard {
40 
      background: #FFDF00;
41 
      height: 80px;
42 
      width: 21q;
43 
    }
44 
    & .blade {
45 
      background: #FFDF00;
46 
      border-block: 11q solid #14313E;
47 
      height: 30q;
48 
      width: 145q;
49 
    }
50 
    & .tip {
51 
      border: 15px solid #14313E;
52 
      border-left-color: #FFDF00;
53 
      border-right-width: 0;
54 
    }
55 
  }
56 
  .sword-bg {
57 
    position:fixed;
58 
    inset:60px 103px;
59 
    background:#14313E;
60 
  }
61 
  .inner-parens {
62 
    position: fixed;
63 
    inset:75px 63px;
64 
    background: #FFDF00;
65 
    border-radius: 20px;
66 
    &:before,&:after{
67 
      position:absolute;
68 
      top:25;
69 
      left:25;
70 
      width:224;
71 
      height:100;
72 
      background:#14313E;
73 
      border-radius:10px;
74 
      content:'';
75 
    }
76 
    &:before{
77 
      width:294;
78 
      height:40px;
79 
      left:-10px;
80 
      top:55;
81 
      background:#FFDF00;
82 
      border-radius:5px;
83 
    }
84 
  }
85 
</style>

The second try was using divs for the swords. Since rotating them lead to some strange spaces between the divs, I suspect this to be the main source of achieving even less match: 99.5%.

Highlighted solution (1520 characters)
1 
<div class="inner-parens"></div>
2 
<div class="sword-bg"></div>
3 
<div class="sword"></div>
4 
<div class="sword r"></div>
5 
<div class="tip"></div>
6 
<div class="tip r"></div>
7
8 
<style>
9 
  &{
10 
    background:#14313E;
11 
  }
12 
  .tip.r {
13 
    translate:245px 63px;
14 
  }
15 
  .tip {
16 
    position: fixed;
17 
    background:#FFDF00;
18 
    translate:119px 63px;
19 
    width:21;
20 
    height:21;
21 
  }
22 
  .sword.r {
23 
    rotate:-45deg;
24 
    translate:187px 43px;
25 
    outline:15px solid #14313E;
26 
    &:after {
27 
      translate:-30px -1.5px;
28 
    }
29 
  }
30 
  .sword {
31 
    position: fixed;
32 
    translate:177px 42px;
33 
    box-sizing: border-box;
34 
    rotate:45deg;
35 
    background: #FFDF00;
36 
    width:20;
37 
    height:198;
38 
    border-radius: 8px;
39 
    &:before{
40 
      content:'';
41 
      display:block;
42 
      background:#FFDF00;
43 
      translate: -5px 3px;
44 
      width:30;
45 
      height:140;
46 
    }
47 
    &:after{
48 
      content:'';
49 
      display:block;
50 
      background:#FFDF00;
51 
      translate: -30px -0.75px;
52 
      width:80;
53 
      height:19;
54 
    }
55 
  }
56 
  .sword-bg {
57 
    position:fixed;
58 
    inset:60px 103px;
59 
    background:#14313E;
60 
  }
61 
  .inner-parens {
62 
    position: fixed;
63 
    inset:75px 63px;
64 
    background: #FFDF00;
65 
    border-radius: 20px;
66 
    &:before,&:after{
67 
      position:absolute;
68 
      top:25;
69 
      left:25;
70 
      width:224;
71 
      height:100;
72 
      background:#14313E;
73 
      border-radius:10px;
74 
      content:'';
75 
    }
76 
    &:before{
77 
      width:294;
78 
      height:40px;
79 
      left:-10px;
80 
      top:55;
81 
      background:#FFDF00;
82 
      border-radius:5px;
83 
    }
84 
  }
85 
</style>

I found a solution online that worked without being completely weird and using Unicode quirks or similar things. This made me challenge it a final time, getting to a 100% solution. There is a .75px value for me, so it's not completely free from strange numbers, but well - it finally worked.

< Back to Frontend Friday Folks Index