# 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](https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Flag_of_India_%28Websafe%29.svg/383px-Flag_of_India_%28Websafe%29.svg.png)

Now you have seen what it looks like. let's make it.


### Creating Flag Strips


```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:

```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:

![first](https://i.imgur.com/tD7UwJ6.png)


### Adding Wheel
Now let's add a wheel in the middle of the white strip.


```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](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect) then 13 spokes are enough.

Let's style the wheel:

```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`:

```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:

%[https://codepen.io/j471n/pen/NWYOBLm]


## 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

```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

```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

```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.
 

### Result

%[https://codepen.io/j471n/pen/mdxzjZG]

## 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.