Jatin Sharma

Posted on Aug 15, 2022 • Updated on Aug 17, 2022 • Originally published at j471n.in

CSS Flag: India

#css #webdev #beginners #tutorial

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)

Navid • Dec 22 '22

thank you very much for you nice efforts

Jatin Sharma • Dec 23 '22

It's always a pleasure ✨

Mihail Malo • Aug 15 '22

counter-value would come in really handy here. (instead of :nth-child)

Jatin Sharma • Aug 15 '22

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

Mihail Malo • Aug 15 '22

It doesn't exist. (yet?)

Jatin Sharma • Aug 16 '22

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

Mihail Malo • Aug 16 '22 • Edited

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

Michael Tharrington • Aug 15 '22 • Edited

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!