DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,547 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for How to Create Malaysia Flag with HTML and CSS πŸ‡²πŸ‡Ύ
Henry Lim
Henry Lim

Posted on

How to Create Malaysia Flag with HTML and CSS πŸ‡²πŸ‡Ύ

Malaysia is now 62-years old! πŸŽ‰ Happy birthday, Malaysia! πŸŽ‚

To celebrate this big day, I have decided to create the Malaysia flag using HTML and CSS (only), and without using any JavaScript, SVG, and of course, without using any images.Β 

Um … But technically I can use emoji right? Or maybe I can use this NPM package?


Flag of Malaysiaβ€Š-β€ŠJalur GemilangΒ πŸ‡²πŸ‡Ύ

The flag of Malaysia, also known as the Malay: Jalur Gemilang ("Stripes of Glory"), is composed of a field of 14 alternating red and white stripes along the fly and a blue canton bearing a crescent and a 14-point star known as the Bintang Persekutuan (Federal Star).

Here are the components that I need to create using HTML and CSS:

  • 14 Alternating Red and White Stripes: Sounds easy 😎
  • Crescent: Hmm, a big circle and a small circle inside? πŸ€”
  • 14-Point Star: I have completely no idea how to do this 🀭

Step 1: Create Flag Layout with CSSΒ Grid

(Source: Wikipedia)

Firstly, I am going to create the flag layout with CSS Grid.Β 

It's pretty straight-forward, I will use grid-template-rows and grid-template-columns properties to create the flag layout with 2 rows and 2 columns.

Then, I will use grid-column: span 2 to expand the bottom column into a full row (or 2 columns).

I am also using CSS Variable too

CSS Grid Layout for Jalur Gemilang

Step 2: 14 Alternating Red and WhiteΒ Stripes

The Jalur Gemilang consists of 7 red stripes and 7 white stripes. 8 of the stripes are located at the upper-right quarter, and the rest of the 6 stripes are located at the bottom part of the flag.

7 red stripes + 7 white stripes

What I need to do now, is to create 14 <div> and use CSS'sΒ :nth-child(even) andΒ :nth-child(odd) rules to style the stripes.Β 

But is there any other better method to do this? πŸ€”

Hmm … how about using repeating-linear-gradient?

The repeating-linear-gradient() CSS function creates an image consisting of repeating linear gradients. It is similar to linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.β€Š-β€ŠMDN Web Docs

With that, I can use repeating-linear-gradient to create the 14 red-white stripes without writing 14 <div>! CSS FTW! πŸŽ‰


Step 3: CrescentΒ πŸŒ™

The crescent can be created using a circle with an inner shadow, which can be done using the inset value. (Thanks Google!)

I found this method online Β―\_(ツ)_/Β―

Here's how the flag looks like (so far)

Step 4: 14-pointΒ star

That's the moment, I realized I have completely no idea how to create a 14-point star using CSS. (And I also forgot how to draw the 14-point star by hand πŸ€¦β€β™€οΈ)

Yes, it's really difficult to draw the 14-point star 🀣 (Image: submerryn.com)

So after some simple research (aka Google Search), I found 3 ways how to draw a 14-point star:

Method 1: Draw 7 lines, then draw a "V" between each tip.

  • πŸ˜€ Very easy to draw on paper
  • πŸ˜• No idea how to recreate it with CSS

Draw 7 lines, then draw a "V" between each tip (Image Source: submerryn.com)

Method 2: 14 triangles surrounded by a circle.

  • πŸ˜€ Easy to draw on paper
  • ☹️ Hard to recreate it using CSS

14 triangles surrounded by a big circle?

Method 3: 7 long diamond shapes with different rotation values.

  • πŸ€·β€β™€οΈ I guess no one uses this method to draw on paper?
  • 😍 Very easy to recreate it using CSS

7 long diamond shapes with different rotation values

Ok, now I have found a way to create the 14-point star using CSS, the next step is to create 14 long diamond shape with different rotation values.

Long diamond shape = 2 isosceles triangles

The long diamond shape can be created using 2 isosceles triangles. The code should look something like this:

The next step is to duplicate the long diamond shape for 6 more times, and add the CSS rotate function to it. As a result, the code should look like this:


Result πŸ‡²πŸ‡Ύ

Here you have it, I have successfully created the Malaysia flag using 30 lines of HTML and ~120 lines of CSS. πŸŽ‰Β 

https://codepen.io/limhenry/pen/mdbEGYg

You can look at the full code on CodePen: codepen.io/limhenry/pen/mdbEGYg


What's next?

However, this is not perfect yet. Few more things can be improved:

😀 Issue #1: Sub-pixel Rendering

Sub-pixel rendering issue on Firefox

If you open the CodePen link in Firefox, you might notice the sub-pixel rendering issue (The weird line in the 14-point star).

However, it's actually possible to fix it using transform: translateZ(1px); (Refer to line 111). By doing this, the browser will render it using hardware acceleration or GPU acceleration, instead of the browser's slower software rendering engine.

πŸ˜… Issue #2: Flag is Not Responsive

This can be done with a few lines of JavaScript code, but maybe I can write another article just for this? πŸ€”


Anyway, it's time for me to go eat some Nasi Lemak πŸ˜‹ Happy Birthday Malaysia! πŸŽ‰

HAPPY BIRTHDAY, MALAYSIA! πŸ‡²πŸ‡ΎπŸŽ‚ (Image: NG-MY KIA / πŸ“Έ Myself)

Top comments (16)

Collapse
 
darksmile92 profile image
Robin Kretzschmar

Really great post!
I love when people create such things just using CSS and not falling back to some JS library. Very clever to use the diamond shapes for the star!

This is a great example of creativity 😊

Collapse
 
henrylim96 profile image
Henry Lim Author

Thank you! 😁

Collapse
 
parizol profile image
PerryZ

Nice & creative, never thought anybody will do this. Happy birthday Malaysia

Collapse
 
iamaldren profile image
Aldren Bobiles

This is soooo cool! I'm amazed! I suddenly miss Malaysia. Haha

Collapse
 
alvaromontoro profile image
Alvaro Montoro

This is really cool. And reading about the process is even better. Thanks for sharing!

Collapse
 
eliasmqz profile image
Anthony Marquez

This is great and also recreating the flag required some ingenuity due to it's design which makes it even better.

Collapse
 
henrylim96 profile image
Henry Lim Author

I spent most of my time creating that 14-point star πŸ€·β€β™€οΈπŸ€¦β€β™€οΈ

Collapse
 
amartinno1 profile image
Alex Nostadt

Amazing! Thanks a lot for sharing.
This makes me wonder if it's worth to have a purely css library for flags.

Collapse
 
quiet_guy_harry profile image
Harry Lew

Great post ! Happy Merdeka day !

Collapse
 
ernsheong profile image
Jonathan ES Lin

❀️

Collapse
 
cwcheak profile image
WC Chan

Love it, great job bro! Nice to see a fellow Malaysian created this. Happy Merdeka!

Collapse
 
ocshing profile image
Danish C.S.Ooi

This is so cool! Malaysia boleh!

Collapse
 
kifasu profile image
kifasu

Cool post. Love it xD

Greetings from Malaysia
Merdekaaaa!

Collapse
 
naimsolong profile image
Amirul Naim

Dude this is awesome! Happy National Day πŸŽ‰

Collapse
 
_t0p1 profile image
TOP1.0

padu bosskur

Collapse
 
starstalkerawe profile image
Starstalker-awe

Is it okay if I use this code in a collection of flags I'm making?

🌚 Friends don't let friends browse without dark mode.

Just kidding, it's a personal preference. But you can change your theme, font, etc. in your settings.

The more you know. 🌈