Stylish Flag - Daryx Writeups

191 words

1 minute

Stylish Flag

2025-01-10

V1t CTF 2025

Web

/

CSS

Challenge Overview#

The page loads a nearly empty HTML with just a single div.flag:

1
<link rel="stylesheet" href="csss.css">
2
<div class="flag"></div>

The CSS paints “pixels” by using a huge box-shadow list on an 8x8 base square:

1
.flag {
2
  width: 8px;
3
  height: 8px;
4
  background: #0f0;
5
  box-shadow:
6
    264px 0px #0f0,
7
    1200px 0px #0f0,
8
    0px 8px #0f0,
9
    32px 8px #0f0,
10
    ... many more offsets ...
11
    1200px 64px #0f0;
12
}

Each xpx ypx #0f0 entry draws another 8x8 green square at that offset. Together they form pixel art that encodes the flag.

Solution#

Step-by-Step#

Open the page and launch your browser’s DevTools (F12).
In the Elements panel, select the <div class="flag">.
In the Styles panel, add a scaling rule to make the pixel art readable:

1
.flag {
2
  transform: scale(6);
3
  transform-origin: top left;
4
}

If the background makes it hard to read, also add:

1
body { background: #000 !important; }

Once scaled, the pixel grid clearly renders text - read off the CTF flag.

Why This Works#

The box-shadow list is a classic CSS “pixel art” trick: one base element plus many shadows to draw pixels.
All offsets are multiples of 8px in both x and y, creating a grid of 8x8 pixels.
Scaling the element makes the rendered text legible without changing the page semantics.