< Back

Three ways to make the England Flag using CSS

Adam Barr on July 11, 2021

England are in the actually in the final of a major international competition! After 55 years of hurt, England fans prepare to have their hearts broken by an experienced Italian side. And yet, despite all our best instincts telling us not to believe, not to get too excited, not to invest too much into the result of the game, there's something in the nations heart telling us to ignore our brains and trust in Gareth Southgate's. There is something special about this England Team, and maybe, just maybe, they can bring home the England Mens first trophy since 1966.

The atmosphere around the final is incredible, and we at Yordevs wanted to join in the only way we know how, so here are three different ways to make the England Flag using CSS (because I'm not good enough to attempt to make the crest)

Method 1: Create the red cross

The most distinct, and only feature on the England Flag is the red cross. This method involves creating the cross with two red divs that over lap each other.

Method 2: Create the white boxes

You don't have to create the lines of the cross to make the cross, instead you could set the background of the flag to red and make the white squares.

Method 3: Set a background image

If all these shapes aren't up your street, you could let someone else do the hard work by setting their image as the background to your div.

And there you have it, you can now make the England flag using CSS in three different ways, if you want to make the Italian flag, my advice is don't.

Good luck England, if you're reading this between 8pm and 11pm on Sunday 11th June 2021, what are you doing!! Get back to the game!! If you're reading this after Sunday, what's it like now that England have won two major tournaments? I hope it's just as good as we all thought it would be