My personal website is currently made in Symfony. Yeah, I know, not the best thing for this purpose, but I started it a few years ago, when I was younger and carelessler…

A few days ago, I decided I wanted to refactor my website and create a whole new one, using a static site generator. Ended up deciding on Hugo, btw.

As the old one was a bit, well, clunky, I wanted the new one to be online ASAP as possible. But I needed a banner that said “hey, I’m still working on it, be careful”. Well, I don’t really needed it, but it’s cool nevertheless.

My objective was to emulate a kind of “caution” tape, the yellow and black one that reminds you of roadworks. Making a stripes background wasn’t difficult, thanks to tools like, but the most important thing of all is adding a little tilt, simulating the falling tape.

This could be accomplished thanks to the transform: rotate() CSS property.

It ended up being something like this:

See the Pen Untitled by David Davó (@daviddavo) on CodePen.

What do you think? Pretty neat, huh? If you have any comments on it, share your modifications!.