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;
}
body {
background-color: aliceblue;
}
.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 {
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">
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</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;
background-color: var(--blue);
}
.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%;
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.
Result
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.
