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