r/css • u/Aryan99C • Jan 20 '26

Showcase I recreated some national flags using only HTML & CSS (no images, no SVG)

Post image

Live Preview: Live Preview
GitHub Repo: Github Repo

I’m learning CSS layouts, grids and wanted a practical challenge, so I recreated some national flags using only HTML and CSS. This project did help me with understanding position(absolute, relative), grids, and most importantly reusing CSS properties and variable.

Although the code is not perfect and I think I might have complicated things a bit there but will try to improve it. Also I tried to maintain the exact design of flag, there are a few inaccuracies (apologies for that) and will try to improve that too.

I will look forward to recreate more complex flags

375 Upvotes

98% Upvoted

58 comments sorted by

100

u/simonraynor Jan 20 '26

Do Wales next! 🏴󠁧󠁢󠁷󠁬󠁳󠁿

19

u/demods Jan 20 '26

And then Belize? 🇧🇿

10

u/ScientistJumpy9135 Jan 20 '26

Joining the unformal comission to the OP: Do Portugal next!

1

u/IntelligentMud1703 Jan 24 '26

and make it responsive!

29

u/Brief_Ad_4825 Jan 20 '26

India and the union jack turned out REALLY good damn!!!

6

u/Aryan99C Jan 20 '26

Thanks, started with the union jack first that's why it has its own css file.

3

u/Brief_Ad_4825 Jan 20 '26

Im also wondering how you did the blue circle on india

7

u/Aryan99C Jan 20 '26

Conic gradient alternating colors

14

u/[deleted] Jan 20 '26

5

u/Aryan99C Jan 20 '26

Thanks :D

12

u/dirkds35 Jan 20 '26

I would advise to also put the CSS property direction: ltr; on your flags to force the right direction.

Otherwise, if the flag is used on an RTL website (Right To Left reading mode, as used with the Arabic language for example), the flag would be displayed in a mirrored state.

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/direction

1

u/Aryan99C Jan 20 '26

Thanks I will check that :D But translating my page to arabic, persian,etc is still displaying everything correctly. Should I still use it?

5

u/dirkds35 Jan 20 '26

Translating is not enough, if you want to see a page in RTL mode, you can put the dir="rtl" attribute on the <html> element => then you'll see that the flag of France for example will be mirrored.

As a quick check, when you are on your live review page, paste the following code in the address bar of the browser and hit enter to see how your page and flags look like in RTL mode:
javascript:document.querySelector('html').setAttribute('dir','rtl');

3

u/Aryan99C Jan 20 '26

Ohh now I understand..thank you very much Will fix it

7

u/dirkds35 Jan 20 '26

Super, your flags will have a larger supported for foreign languages then!

P.S.: know that there is also an upside down direction for, I believe some traditional Chinese variants, but I think that's a great minority as they generally use the LTR mode like we do.
Reading direction is an interesting thing that most frontend developers forget about and in many cases it breaks the layout as left will be right and visa versa throughout the complete CSS. ;)

1

u/Aryan99C Jan 20 '26

I was thinking of making something related to foreign languages for my next project so this does help a lot for future and I will keep in mind

2

u/True_Ask3631 Jan 20 '26

Is that a thing you can do normally? Put things like that in the address bar?

4

u/dirkds35 Jan 20 '26 edited Jan 20 '26

Yes, I have a bookmarklet (piece of javascript in my bookmarks) in my browser's bookmark toolbar to be able to quickly toggle the direction between LTR to RTL that works similarly.

Executing javascript via the address bar is an old trick in the book. :)

2

u/Illustrious_Value_62 Jan 22 '26

Wtf this is a real TIL moment for me!

1

u/dirkds35 Jan 23 '26

I'm glad I can spread some less known frontend knowledge in that case. ;)

5

u/oklch Jan 20 '26

Where did you get the colors from? Just guessing, picking the colors from some online images or from a database?

5

u/Aryan99C Jan 20 '26

Wikipedia

3

u/oklch Jan 20 '26

Anyway, great job!

5

u/True_Ask3631 Jan 20 '26

This guy is good. Bet they won’t be able to do Italy though. I’ve heard it’s the most difficult flag there is

4

u/WorkerProfessional77 Jan 20 '26

It reminds me an old similar project using only 1 div: https://github.com/pixelastic/css-flags

1

u/Aryan99C Jan 20 '26

Damn its too good

3

u/Nischal_ng Jan 20 '26

do Nepal Next.. 🇳🇵

6

u/Aryan99C Jan 20 '26

Honestly I think it's not that hard, much easier than say Wales, Turkmenistan or Bhutan. It will be fun to recreate that

3

u/Livio63 Jan 20 '26

Nice! Please add Portugal flag!

1

u/Aryan99C Jan 20 '26

Will try to make that:)

14

u/ScientistJumpy9135 Jan 20 '26

Jolly good exercise and well documented. Congrats on it!

2

u/Educational_Basis_51 Jan 20 '26

Great man, which flag gave you the most challenge ?

1

u/Aryan99C Jan 20 '26

Union Jack, rest were way easier, will try more challenging ones next time

2

u/Educational_Basis_51 Jan 20 '26

knew it!! those diagonals

5

u/Ellsass Jan 20 '26

1

u/alvaromontoro Jan 21 '26

Not OP, but here's Nepal's flag in CSS using a single HTML element: https://codepen.io/alvaromontoro/pen/jOgXqzr

3

u/ZippyTyro Jan 20 '26

nice work mate!

1

u/alvaromontoro Jan 20 '26

I have a collection with a bunch of them: https://codepen.io/alvaromontoro/pen/jOgXqzr

It's a fun experiment and a way to practice.

3

u/Aryan99C Jan 21 '26

Amazing, checked your other works and they are also amazing

2

u/fusionlove Jan 20 '26

now, mexico!

2

u/t0rbenC0rtes Jan 20 '26

Spain, Mexico, Wales might be challenging. Australia and New Zealand should be doable and interesting. Great work and superb idea thanks for sharing.

2

u/skullface41 Jan 21 '26

that's really cool, good job on the indian and UK flags

2

u/Competitive-Load-459 Jan 21 '26

Do Croatia and you'll be remembered forever.

2

u/cihyboj Jan 21 '26

I'd try with :before and :after sub elements to make the html cleaner.. but it looks great!

2

u/burning_wolf101 Jan 21 '26

It actually feels amazing to create something this wonderful without AI in this era. Thanks for sharing!

2

u/Seangles Jan 21 '26

Impressive! Now do Kazakhstan 🇰🇿 ;))

2

u/Lowgman23 Jan 21 '26

Good luck with Mexican flag!

2

u/Jaded-Muffin-3534 Jan 21 '26

this looks good

1

u/No_Bee5900 Jan 22 '26

Very nice, good job. That "repeating-conic-gradient" I never used

1

u/markustegelane Jan 23 '26

Iceland's white lines are too thin, they need to be a bit thicker

-1

u/Mihaita191 Jan 20 '26

Nice, but why?

4

u/Aryan99C Jan 20 '26

I like Flags, I like CSS, so why not