How to Create Malaysia Flag with HTML and CSS ๐Ÿ‡ฒ๐Ÿ‡พ

Learn how I create the Malaysia Flag with HTML and CSS (only)!

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 package?

Flag of Malaysia โ€” Jalur Gemilang ๐Ÿ‡ฒ๐Ÿ‡พ

Jalur Gemilang โ€” The Flag of Malaysia

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 ๐Ÿ‡ฒ๐Ÿ‡พ

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

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

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! ๐ŸŽ‰

NG-MY KIA (The mascot of NG-MY 2019) holding the Malaysia Flag, with the Google I/O 2019 stage at the background.
HAPPY BIRTHDAY, MALAYSIA! ๐Ÿ‡ฒ๐Ÿ‡พ๐ŸŽ‚ (Image: NG-MY KIA / Myself)