Create Indian Flag using HTML and CSS

In this article, we will design an animated flag of India using HTML and CSS. As we know that our Indian flag has three colors saffron, white and green and there is also a wheel at the center of the white part. So let’s build the Indian flag. Here we will also create a stick of the flag. So first create a wrapper div (class named wrapper) that holds two divs class named stick and flag.

The stick and the flag should be inline so we make the wrapper div’s display property to flex. And add some height, width, background-color, border styles to the stick, and in the flag, add height, width, box-shadow, background-color, and position properties.

Till now it look like this:

Now design the flag part. The flag part is made of three parts, So make three div’s and classes named top, middle, and bottom. 

Now add height and background-color property to the top, middle, and bottom divs.

Now our flag looks like this: 

Now it’s time to create a wheel so, the wheel is nothing but a div inside the div, class named middle. In the wheel, we create 12 span elements class named ‘line’. 

For styling the wheel, firstly we have to perfectly center the wheel inside the middle div by using flex properties. And design the wheel div by adding height, width, border, border-radius, position. And also design the span elements by adding the height width, position, ‘left’, background, etc properties. And rotate every line item by using :nth-child(n) selector and transform: rotate(angle) property, every rotation should be at the difference of 15 degrees.

Now our complete Indian flag looks like this:

Add some animations: Till now we have created a complete but static flag, now it’s time to create some animations. Here we will add two animations, the first ss wheel rotation animation and the second is wave animation.

Adding wheel rotation animation: To add wheel rotation, we use the transform: rotate(angle) property, making the animation duration 10 seconds, animation timing function linear, and running the animation infinite times.

Now our Indian flag looks like this:

Adding wave animation: Now add the wave animation. For this animation, we create a separate div and add it into the flag div (because we overlay this div inside the flag div only, not in ‘stick’). Add position: absolute, height, and width set to 100%, and add a gradient background-image and change the background positions to animate.

Complete code: The complete code of HTML and CSS to design Indian National Flag.
 

Output: 
 

devi_johns

Follow

Improve

Article Tags :

• Web Technologies
• Web Templates