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
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).
| <style> | |
| :root { | |
| --white: #fff; | |
| --black: #000; | |
| --blue: #010066; | |
| } | |
| .flag { | |
| display: grid; | |
| grid-template-rows: 4fr 3fr; | |
| grid-template-columns: 50% 50%; | |
| background-color: var(--white); | |
| border: 2px solid var(--black); | |
| width: 600px; | |
| height: 300px; | |
| } | |
| .top-left { | |
| background-color: var(--blue); | |
| } | |
| .bottom { | |
| grid-column: span 2; | |
| } | |
| </style> | |
| <div class="flag"> | |
| <div class="top-left"></div> | |
| <div class="top-right"></div> | |
| <div class="bottom"></div> | |
| </div> |
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.
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 tolinear-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
| <style> | |
| .top-right { | |
| background: repeating-linear-gradient( | |
| 0deg, | |
| var(--red), | |
| var(--white) 0 12.5%, /* 12.5% = 100% divide by 8 stripes */ | |
| var(--red) 12.5% 25% | |
| ); | |
| } | |
| .bottom { | |
| background: repeating-linear-gradient( | |
| 0deg, | |
| var(--red), | |
| var(--white) 0 16.7%, /* 16.7% = 100% divide by 6 stripes */ | |
| var(--red) 16.7% 33.3% | |
| ); | |
| } | |
| </style> | |
| <body> | |
| <div class="top-right"></div> | |
| <div class="bottom"></div> | |
| </body> |
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!)
| <style> | |
| .moon { | |
| position: relative; | |
| width: 120px; | |
| height: 120px; | |
| margin-right: -4px; | |
| border-radius: 50%; | |
| box-shadow: inset 15px 0px 0 7px var(--yellow); | |
| } | |
| </style> | |
| <div class="moon"></div> |
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 π€¦ββοΈ)
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
Method 2: 14 triangles surrounded by a circle.
- π Easy to draw on paper
- βΉοΈ Hard to recreate it using CSS
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
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.
The long diamond shape can be created using 2 isosceles triangles. The code should look something like this:
| <style> | |
| .star { | |
| position: relative; | |
| width: 0; | |
| height: 0; | |
| margin-top: -50px; | |
| border-left: 10px solid transparent; | |
| border-right: 10px solid transparent; | |
| border-bottom: 50px solid var(--yellow); | |
| } | |
| .star:before { | |
| content: ""; | |
| position: absolute; | |
| border-left: 10px solid transparent; | |
| border-right: 10px solid transparent; | |
| border-top: 50px solid var(--yellow); | |
| left: -10px; | |
| top: 50px; | |
| } | |
| </style> | |
| <div class="stars"> | |
| <div class="star-container"> | |
| <div class="star"></div> | |
| </div> | |
| </div> |
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:
| <style> | |
| .star-container:nth-child(2) { | |
| transform: rotate(calc(180deg / 7)); | |
| } | |
| .star-container:nth-child(3) { | |
| transform: rotate(calc(180deg / 7 * 2)); | |
| } | |
| .star-container:nth-child(4) { | |
| transform: rotate(calc(180deg / 7 * 3)); | |
| } | |
| .star-container:nth-child(5) { | |
| transform: rotate(calc(180deg / 7 * 4)); | |
| } | |
| .star-container:nth-child(6) { | |
| transform: rotate(calc(180deg / 7 * 5)); | |
| } | |
| .star-container:nth-child(7) { | |
| transform: rotate(calc(180deg / 7 * 6)); | |
| } | |
| </style> | |
| <div class="stars"> | |
| <div class="star-container"> | |
| <div class="star"></div> | |
| </div> | |
| <div class="star-container"> | |
| <div class="star"></div> | |
| </div> | |
| <div class="star-container"> | |
| <div class="star"></div> | |
| </div> | |
| <div class="star-container"> | |
| <div class="star"></div> | |
| </div> | |
| <div class="star-container"> | |
| <div class="star"></div> | |
| </div> | |
| <div class="star-container"> | |
| <div class="star"></div> | |
| </div> | |
| <div class="star-container"> | |
| <div class="star"></div> | |
| </div> | |
| </div> |
Result π²πΎ
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
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! π
Top comments (16)
This is really cool. And reading about the process is even better. Thanks for sharing!
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 π
Thank you! π
Nice & creative, never thought anybody will do this. Happy birthday Malaysia
This is soooo cool! I'm amazed! I suddenly miss Malaysia. Haha
Love it, great job bro! Nice to see a fellow Malaysian created this. Happy Merdeka!
Cool post. Love it xD
Greetings from Malaysia
Merdekaaaa!
padu bosskur
This is so cool! Malaysia boleh!
β€οΈ
This is great and also recreating the flag required some ingenuity due to it's design which makes it even better.
I spent most of my time creating that 14-point star π€·ββοΈπ€¦ββοΈ