< Back to Frontend Friday Folks Index

Gift Box

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 (528 characters)
1 
<div l></div>
2 
<div r></div>
3 
<div b></div>
4 
<style>
5 
  body{
6 
    background:#AC474B;
7 
  }
8 
  *{position:fixed;}
9 
  [l],[r] {
10 
    top: 42;
11 
    left: 157;
12 
    position:absolute;
13 
    width: 21;
14 
    height: 20;
15 
    border: 10px solid #fff;
16 
    border-radius: 20px 20px 0;
17 
    background: #AC474B;
18 
  }
19 
  [r] {
20 
    left:187;
21 
    border-radius: 20px 20px 20px 0;
22 
  }
23 
  [b] {
24 
    top: 110;
25 
    left: 130;
26 
    width: 20;
27 
    height: 20;
28 
    border: 64q solid;
29 
    border-image: linear-gradient(#fff,#fff);
30 
    background: #AC474B;
31 
  }
32 
</style>

I've used border-image for the first time, to get the four parts of the box. The loop at the top are two divs with an appropriate border-radius. Since we did the Snowman, Candle and this one in one session, I couldn't finish it with 100% in the beginning. I did change it a couple of days later and got to 100% with the above solution though, keeping the initial ideas.

< Back to Frontend Friday Folks Index