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

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

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

Jalur Gemilang โ€” The Flag of Malaysia

Step 1: Create Flag Layout with CSS Grid

(Source: Wikipedia)
I am also using CSS Variable too.
CSS Grid Layout for Jalur Gemilang

Step 2: 14 Alternating Red and White Stripes

7 red stripes + 7 white stripes

Step 3: Crescent ๐ŸŒ™

I found this method online ยฏ\_(ใƒ„)_/ยฏ
Hereโ€™s how the flag looks like (so far).

Step 4: 14-point star

Yes, itโ€™s really difficult to draw the 14-point star ๐Ÿคฃ (Image: submerryn.com)
Draw 7 lines, then draw a โ€œVโ€ between each tip (Image Source: submerryn.com)
14 triangles surrounded by a big circle?
7 long diamond shapes with different rotation values
Long diamond shape = 2 isosceles triangles

Result ๐Ÿ‡ฒ๐Ÿ‡พ

Whatโ€™s next?

Sub-pixel rendering issue on Firefox
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)

Google Developer Expert in Web Technologies | Front-end Web Developer | Making the web better with Preact, Polymer, Web Components, PWA & Firebase