CSS Flag: India
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
index.html
<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:
style.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.
index.html
<div class="flag">
<div class="saffron"></div>
<div class="white">
<!-- New Part Added -->
<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>
<!-- 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:
style.css
.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:
style.css
.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
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
index.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
style.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);
}These are the old styles only change is that I am not styling each spoke individually.
JavaScript
script.js
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
Wrapping up
There are many ways to solve this. You can share your approach in the comments. If you like this then you can extend your support by Buying me a Coffee