DEV Community 👩‍💻👨‍💻

Cover image for CSS Flag: India
Jatin Sharma
Jatin Sharma

Posted on • Updated on • Originally published at j471n.in

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

flag

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>
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

After applying these styles. Results will be like this:

first

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>
Enter fullscreen mode Exit fullscreen mode

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)
}
Enter fullscreen mode Exit fullscreen mode

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;  
  /* .... */
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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);
  }
}
Enter fullscreen mode Exit fullscreen mode

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)
}
Enter fullscreen mode Exit fullscreen mode

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 (11)

Collapse
 
qm3ster profile image
Mihail Malo
Collapse
 
j471n profile image
Jatin Sharma Author

I didn't knew about that. Thanks for sharing :)

Collapse
 
qm3ster profile image
Mihail Malo

It doesn't exist. (yet?)

Thread Thread
 
j471n profile image
Jatin Sharma Author

It does actually, you can see th documentation. But it just works with ::before and ::after

Thread Thread
 
qm3ster profile image
Mihail Malo • Edited on

That's just counter().
counter-value() enables it to be used in calc(), not only in content:, which only affects pseudo-elements.

Collapse
 
michaeltharrington profile image
Michael Tharrington • Edited on

Woot! And 2 methods too — awesome. 😀

Comment down which country's flag you want to see next.

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!

screenshot from Wikipedia of countries that have independence day on August 15th

So, my vote has def gotta go to one of these places!

Collapse
 
dazadams profile image
DazAdams

I vote for Wales.
Because dragons are cool :)

Collapse
 
j471n profile image
Jatin Sharma Author

I'll try to make every country's flag. It's just the beginning :)

Collapse
 
michaeltharrington profile image
Michael Tharrington

Aw man! That's awesome. 🔥

Collapse
 
gass profile image
Gass • Edited on

What a great idea for a new series 🤩 ... The transform-origin:bottom property is very interesting. I didn't know about that approach.

Collapse
 
zural profile image
Shiva

Great

🌚 Life is too short to browse without dark mode