How to Create Malaysia Flag with HTML and CSS 🇲🇾
Tags: webdev, html, css, showdev
Published: 2019-08-30 08:20:24

---
title: How to Create Malaysia Flag with HTML and CSS 🇲🇾 
published: true
description: Learn how I create the Malaysia Flag with HTML and CSS (only)!
tags: #webdev, #html, #css, #showdev
cover_image: https://i.imgur.com/iOInuiP.jpg
---

Malaysia is now [62-years old](https://en.wikipedia.org/wiki/Hari_Merdeka)! 🎉 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](https://www.npmjs.com/package/emoji-flag-my)?_

---

### Flag of Malaysia - Jalur Gemilang 🇲🇾

![](https://thepracticaldev.s3.amazonaws.com/i/autyz4pk2snhqtvw7gv6.png)

> _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

![](https://i.imgur.com/d8J0gqO.png)
<figcaption>(Source: <a href="https://en.wikipedia.org/wiki/Flag_of_Malaysia#/media/File:Construction_sheet_of_Flag_of_Malaysia.svg">Wikipedia</a>)</figcaption>

Firstly, I am going to create the flag layout with [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-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)_.

{% gist https://gist.github.com/limhenry/6c9e4f0af9d52aa137f460889f4935b4 %}
<figcaption>I am also using CSS Variable too</figcaption>

![](https://i.imgur.com/0MQDxdk.png)
<figcaption>CSS Grid Layout for Jalur Gemilang</figcaption>

---

### 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.

![](https://i.imgur.com/Xclvxhj.png)
<figcaption>7 red stripes + 7 white stripes</figcaption>

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](https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient)_

{% gist https://gist.github.com/limhenry/be6c3cedcd0e7d95523252c38dfa8f6b %}

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](https://www.google.com/search?q=how+to+create+crescent+with+css)!_)

{% gist https://gist.github.com/limhenry/92d49b66c2f1fb16b53c0918b4a71e3b %}
<figcaption>I found this method online ¯\_(ツ)_/¯</figcaption>

![](https://i.imgur.com/5hnRTg4.png)
<figcaption>Here's how the flag looks like (so far)</figcaption>

---

### Step 4: 14-point star

![](https://i.imgur.com/T3ZMN1O.png)
<figcaption></figcaption>

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_ 🤦‍♀️)

![](https://i.imgur.com/oU4zzy2.png)
<figcaption>Yes, it's really difficult to draw the 14-point star 🤣 (Image: <a href="https://www.submerryn.com/2013/08/how-to-draw-the-star-of-our-jalur-gemilang.html">submerryn.com</a>)</figcaption>

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

![](https://i.imgur.com/jmOgtnT.gif)
<figcaption>Draw 7 lines, then draw a "V" between each tip (Image Source: <a href="https://www.submerryn.com/2013/08/how-to-draw-the-star-of-our-jalur-gemilang.html">submerryn.com</a>)</figcaption>

**Method 2:** 14 triangles surrounded by a circle.
 - 😀 Easy to draw on paper
 - ☹️ Hard to recreate it using CSS

![](https://i.imgur.com/JjN4WFd.png)
<figcaption>14 triangles surrounded by a big circle?</figcaption>

**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

![](https://i.imgur.com/gXyWUbD.gif)
<figcaption>7 long diamond shapes with different rotation values</figcaption>

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.

![](https://i.imgur.com/v2pJiKC.gif)
<figcaption>Long diamond shape = 2 isosceles triangles</figcaption>

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

{% gist https://gist.github.com/limhenry/7d57aea122d742938d85146619e329e2 %}

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:

{% gist https://gist.github.com/limhenry/6180c1ad7d025c484efe57b9201db07e %}

---

### Result 🇲🇾

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

![](https://i.imgur.com/silPSzV.png)
<figcaption><a href="https://codepen.io/limhenry/pen/mdbEGYg">https://codepen.io/limhenry/pen/mdbEGYg</a></figcaption>

You can look at the full code on CodePen: [codepen.io/limhenry/pen/mdbEGYg](https://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

![](https://i.imgur.com/KqFvkMh.png)
<figcaption>Sub-pixel rendering issue on Firefox</figcaption>

If you open the [CodePen link](https://codepen.io/limhenry/pen/mdbEGYg) 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](https://codepen.io/limhenry/pen/mdbEGYg)_). 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](https://en.wikipedia.org/wiki/Nasi_lemak) 😋 Happy Birthday Malaysia! 🎉

![](https://i.imgur.com/jq1Pdn1.jpg)
<figcaption>HAPPY BIRTHDAY, MALAYSIA! 🇲🇾🎂 (Image: <a href="https://www.instagram.com/ngmykia/">NG-MY KIA</a> / 📸 Myself)</figcaption>