Today is 15 August, It was the date when India became independent. So we as Indians celebrate Independence day today. So, I am starting a new series called CSS Flag. Where I'll be making different countries' flags starting from India.
So, I guess you have an idea now what I am going to do. So let's jump right into it.
Method-1
Now you have seen what it looks like. let's make it.
Creating Flag Strips
<div class="flag">
<div class="saffron"></div>
<div class="white"></div>
<div class="green"></div>
</div>
The National flag of India is a horizontal tricolor of deep saffron (Kesari) at the top, white in the middle, and dark green at the bottom in equal proportion.
I have created a parent or wrapper class .flag
. It has three divs
representing each horizontal section of the flag.
Now let's style them with CSS:
* {
box-sizing: border-box;
margin: 0;
}
:root {
--saffron : #ff6600;
--green : #046434;
--blue: #1c1ca5;
}
/* You can change the body color as per your needs */
body {
background-color: aliceblue;
}
/* Flag is 300x200 */
.flag {
width: 300px;
height: 200px;
display: flex;
flex-direction: column;
box-shadow: 0 0 1px rgba(0, 0, 0,0.5);
}
/* It will divide each section (saffron, white, green) equally */
.flag > * {
flex:1;
}
.saffron {
background-color: var(--saffron);
}
.white {
position: relative;
background-color: white;
}
.green {
background-color: var(--green);
}
After applying these styles. Results will be like this:
Adding Wheel
Now let's add a wheel in the middle of the white strip.
<div class="flag">
<div class="saffron"></div>
<div class="white">
<!-- New Part Added -->
<div class="wheel">
<span class="spoke"></span>
<span class="spoke"></span>
<span class="spoke"></span>
<span class="spoke"></span>
<span class="spoke"></span>
<span class="spoke"></span>
<span class="spoke"></span>
<span class="spoke"></span>
<span class="spoke"></span>
<span class="spoke"></span>
<span class="spoke"></span>
<span class="spoke"></span>
<span class="spoke"></span>
</div>
<!-- New Part End -->
</div>
<div class="green"></div>
</div>
I have added the .wheel
div inside .white
container class. An India Flag has 24 spokes in the wheel (Ashoka Chakra) which represent 24 qualities of a person. So I have added 13 spokes inside .wheel
. As I am going to use -webkit-box-reflect then 13 spokes are enough.
Let's style the wheel:
.wheel {
height: 100%;
width: 67px;
border-radius: 1in;
margin: 0 auto;
border: 2q solid var(--blue);
position: relative;
display: grid;
place-items: center;
}
.spoke {
height: 50%;
width: 2px;
position: absolute;
top: 0;
clip-path: polygon(50% 0, 50% 0, 100% 70%, 50% 100%, 50% 100%, 0 70%);
transform-origin: bottom; /* as we are going to rotate spokes so we need to rotate from the bottom */
background-color: var(--blue);
}
/* Styling spoke individually */
.spoke:nth-child(1) {
transform: rotate(15deg)
}
.spoke:nth-child(2) {
transform: rotate(30deg);
}
.spoke:nth-child(3) {
transform: rotate(45deg)
}
.spoke:nth-child(4) {
transform: rotate(60deg)
}
.spoke:nth-child(5) {
transform: rotate(75deg)
}
.spoke:nth-child(6) {
transform: rotate(90deg)
}
.spoke:nth-child(7) {
transform: rotate(105deg)
}
.spoke:nth-child(8) {
transform: rotate(120deg)
}
.spoke:nth-child(9) {
transform: rotate(135deg)
}
.spoke:nth-child(10) {
transform: rotate(150deg)
}
.spoke:nth-child(11) {
transform: rotate(165deg)
}
.spoke:nth-child(12) {
transform: rotate(180deg)
}
Now we need to add -webkit-box-reflect to .wheel
:
.wheel {
/* .... */
-webkit-box-reflect: left -99%; /* play with value -99%, 100%, 101% */
animation: spin 4s linear infinite;
/* .... */
}
Result
You can see the result in the following codepen:
Method-2 using Javascript
The above solution works fine but there are many duplications and styling each spoke
is kind of annoying and also there is overlapping in some spokes. To fix that we are going to use little bit of javascript.
HTML
<div class="flag">
<div class="saffron"></div>
<div class="white">
<div class="wheel"></div>
</div>
<div class="green"></div>
</div>
There is nothing fancy. I have only added .wheel
inside the .white
strip container.
CSS
* {
box-sizing: border-box;
margin: 0;
}
:root {
--saffron : #ff6600;
--green : #046434;
--blue: #1c1ca5;
}
.flag {
width: 300px;
height: 200px;
display: flex;
flex-direction: column;
box-shadow: 0 0 1px rgba(0, 0, 0,0.5);
}
.flag > * {
flex:1;
}
.saffron {
background-color: var(--saffron);
}
.white {
background-color: white;
position: relative;
}
.green {
background-color: var(--green);
}
.wheel {
height: 100%;
width: 67px;
border-radius: 1in;
margin: 0 auto;
border: 2q solid var(--blue);
position: relative;
display: grid;
place-items: center;
}
.spoke {
height: 50%;
width: 2px;
position: absolute;
top: 0;
clip-path: polygon(50% 0, 50% 0, 100% 70%, 50% 100%, 50% 100%, 0 70%);
transform-origin: bottom;
background-color: var(--blue);
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
These are the old styles only change is that I am not styling each spoke individually.
JavaScript
const wheel = document.querySelector(".wheel");
for (let i =1; i <= 24; i++){
let spoke = document.createElement('span');
spoke.classList.add("spoke");
spoke.style.rotate = `${i*15}deg`;
wheel.appendChild(spoke)
}
In this, we are creating a span
and adding .spoke
class to it and then rotating it. For each spoke, we increase the rotation by 15deg
. After that just add the spoke to the wheel.
Results
Note: Try Codepen in Desktop/Laptop. There is some issue with mobile devices.
Wrapping up
If you have any queries, feel free to drop a comment below. Make sure you follow more such articles. If you like this then don't forget to ❤️ it. Comment down which country's flag you want to see next. I'll see you in the next one.
Top comments (13)
Woot! And 2 methods too — awesome. 😀
This made me curious if there were any other national independence days coming up and thanks to Wikipedia, I learned that there are actually several today!
So, my vote has def gotta go to one of these places!
I vote for Wales.
Because dragons are cool :)
I'll try to make every country's flag. It's just the beginning :)
Aw man! That's awesome. 🔥
counter-value
would come in really handy here. (instead of :nth-child)I didn't knew about that. Thanks for sharing :)
It doesn't exist. (yet?)
It does actually, you can see th documentation. But it just works with
::before
and::after
That's just
counter()
.counter-value()
enables it to be used incalc()
, not only incontent:
, which only affects pseudo-elements.thank you very much for you nice efforts
It's always a pleasure ✨
What a great idea for a new series 🤩 ... The
transform-origin:bottom
property is very interesting. I didn't know about that approach.Great