The Canadian Flag, In CSS

I was over at Stu Nicholls today and saw this really cool British flag completely done up in CSS. So I investigated a little futher, figured out how to do “diagonals” in CSS, and started work on my own.

After wasting about an hour and a half, I came up with my version of the Canadian Flag below. Yes that’s right all done in CSS, including the maple leaf. The maple leaf is a little … off, but still, it was fun trying to figure out what triangles go where. And if you have IE, well it probably won’t work, sorry. But let me know what you think. …

CSS Flag


The Canadian Flag, In CSS was written by


The opinions expressed in comments are entirely the responsibility of the various contributors. While I will do everything within reason to ensure that they are not defamatory, I accept no liability for them or the content of links included in them.


Makes me want to make a China one hahahah


I might just have to try to one up ya and make it wave. ;)

Good job Matt.


Diagonals? I didn’t even know that was possible. If you know a resource on how to do that beyond my parsing your flag’s code I’d appreciate it.


Guerra de pixels com CSS

O CSS House é uma boa referência do que é possível fazer com o CSS. Mas estas demonstrações estão passando das meras demonstrações para o campo das batalhas pixelares. Até aonde se sa…

Related Posts