< Back to Frontend Friday Folks Index

Sealing Wand

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 (959 characters)
1 
<div s></div>
2 
<div h></div>
3 
<div r></div>
4 
<div t></div>
5 
<div w a></div>
6 
<div w b></div>
7 
<div w c></div>
8 
<style>
9 
  *{position:absolute}
10 
  [h]{
11 
    height: 150;
12 
    width: 20;
13 
    top:150;
14 
    left: 181.5;
15 
    background: #E96A23;
16 
  }
17 
  [t]{
18 
    top: 0;
19 
    left: 0;
20 
    width: 384px;
21 
    height: 284px;
22 
    background:
23 
      radial-gradient(1q, #161616 10px, #A22015 0 15px, #fff 0 25px,#A22015 0 30px, #0000 0);
24 
  }
25 
  [r]{
26 
    height: 40;
27 
    width: 30;
28 
    left:177;
29 
    top:155;
30 
    border-radius: 10px;
31 
    background:#A22015;
32 
  }
33 
  [w]{
34 
    left: 121.5;
35 
    top: 124;
36 
    height:12px;
37 
    width:53px;
38 
    border-radius:0 0 0 15px;
39 
    background:#fff;
40 
    &[b]{
41 
      width: 33px;
42 
      left:137;
43 
      top:136;
44 
    }
45 
    &[c]{
46 
      width: 23px;
47 
      left:152;
48 
      top:148;
49 
    }
50 
  }
51 
  [s]{
52 
    left:192;
53 
    top:121;
54 
    height: 40px;
55 
    width: 80px;
56 
    border-radius: 0 60px 6px 0;
57 
    background:#E96A23;
58 
  }
59 
&{
60 
  background:
61 
  #161616
62 
}
63 
</style>

Ok, this could have been done with gradients, but since there are so many little rounded corners, it's just easier to do it with lots of border-radius elements than gradients. Gradients could have worked as well, if done with correct translations and cut out radials, but this amount of gradients sounds like a lot of work to me.

< Back to Frontend Friday Folks Index