Create Indian Flag using HTML and CSS
Last Updated :
24 Oct, 2021
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.
HTML
<div class = "wrapper">
<div class="stick"></div>
<div class="flag"></div>
</div>
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.
CSS
.wrapper {
display: flex;
}
.stick {
height: 450px;
width: 10px;
background: black;
border-top-left-radius: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.flag {
width: 270px;
height: 180px;
box-shadow: 0px 0px 90px 1px #989;
background-color: transparent;
position: relative;
}
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.
HTML
<div class="wrapper">
<div class="stick"></div>
<div class="flag">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</div>
Now add height and background-color property to the top, middle, and bottom divs.
CSS
.top {
height: 60px;
background-color: #ff9933
}
.middle {
height: 60px;
background-color: white
}
.bottom {
height: 60px;
background-color: green
}
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'.
HTML
<div class="flag">
<div class="top"></div>
<div class="middle">
<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>
</div>
</div>
<div class="bottom"></div>
</div>
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.
CSS
.wheel {
height: 43px;
width: 43px;
border: 1px solid darkblue;
border-radius: 45px;
position: relative;
margin: 0 auto
}
.wheel .line {
height: 100%;
width: 1px;
display: inline-block;
position: absolute;
left: 50%;
background: darkblue;
}
.line:nth-child(1) {
transform: rotate(15deg)
}
.line:nth-child(2) {
transform: rotate(30deg)
}
.line:nth-child(3) {
transform: rotate(45deg)
}
.line:nth-child(4) {
transform: rotate(60deg)
}
.line:nth-child(5) {
transform: rotate(75deg)
}
.line:nth-child(6) {
transform: rotate(90deg)
}
.line:nth-child(7) {
transform: rotate(105deg)
}
.line:nth-child(8) {
transform: rotate(120deg)
}
.line:nth-child(9) {
transform: rotate(135deg)
}
.line:nth-child(10) {
transform: rotate(150deg)
}
.line:nth-child(11) {
transform: rotate(165deg)
}
.line:nth-child(12) {
transform: rotate(180deg)
}
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.
CSS
.wheel {
animation-name: wheel;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-timing-function: linear;
}
@keyframes wheel {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
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.
CSS
.wave {
position: absolute;
height: 100%;
width: 100%;
background-image: linear-gradient(
128deg, rgba(89, 72, 21, 0) 39%,
rgba(250, 245, 245, 0.8474025974025974)
46%, rgba(89, 72, 21, 0) 53%);
animation-name: wavy;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes wavy {
0% {
background-position: -400px 0px,
-400px 0px, -400px 0px, -400px 0px;
}
100% {
background-position: 800px 0px,
800px 0px, 800px 0px, 800px 0px;
}
}
Complete code: The complete code of HTML and CSS to design Indian National Flag.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="stick"></div>
<div class="flag">
<div class="wave"></div>
<div class="top"></div>
<div class="middle">
<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>
</div>
</div>
<div class="bottom"></div>
</div>
</div>
</body>
</html>
.wrapper {
display: flex;
}
.stick {
height: 450px;
width: 10px;
background: black;
border-top-left-radius: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.flag {
width: 270px;
height: 180px;
box-shadow: 0px 0px 90px 1px #989;
background-color: transparent;
position: relative;
}
.top {
height: 60px;
background-color: #ff9933
}
.middle {
height: 60px;
display: flex;
justify-content: center;
align-items: center;
}
.bottom {
height: 60px;
background-color: green
}
.wheel {
height: 43px;
width: 43px;
border: 1px solid darkblue;
border-radius: 45px;
position: relative;
margin: 0 auto;
animation-name: wheel;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-timing-function: linear;
}
.wheel .line {
height: 100%;
width: 1px;
display: inline-block;
position: absolute;
left: 50%;
background: darkblue;
}
.line:nth-child(1) {
transform: rotate(15deg)
}
.line:nth-child(2) {
transform: rotate(30deg)
}
.line:nth-child(3) {
transform: rotate(45deg)
}
.line:nth-child(4) {
transform: rotate(60deg)
}
.line:nth-child(5) {
transform: rotate(75deg)
}
.line:nth-child(6) {
transform: rotate(90deg)
}
.line:nth-child(7) {
transform: rotate(105deg)
}
.line:nth-child(8) {
transform: rotate(120deg)
}
.line:nth-child(9) {
transform: rotate(135deg)
}
.line:nth-child(10) {
transform: rotate(150deg)
}
.line:nth-child(11) {
transform: rotate(165deg)
}
.line:nth-child(12) {
transform: rotate(180deg)
}
@keyframes wheel {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.wave{
position: absolute;
height: 100%;
width: 100%;
background-image: linear-gradient(
128deg, rgba(89,72,21,0) 39%,
rgba(250,245,245,0.8474025974025974)
46%, rgba(89,72,21,0) 53%);
animation-name: wavy;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes wavy {
0%{
background-position:
-400px 0px, -400px 0px,
-400px 0px,-400px 0px;
}
100%{
background-position: 800px 0px,
800px 0px, 800px 0px, 800px 0px;
}
}
Output:
Similar Reads
Create an Icon Bar using HTML and CSS
This article provides a complete idea of how to create an Icon Bar using HTML and CSS. HTML is used to design the structure, and CSS applies styles to the elements to make the user interface (UI) attractive. To add the Icons, we use the Font Awesome icons CDN link in the head section, and add the ic
2 min read
Create a Curtain Menu using HTML and CSS
This article will show you how to create a Curtain menu navbar effect with the help of HTML and CSS. The curtain menu means revealing or pulling down the menu items like a curtain. HTML is used to create the structure of the curtain menu and applies styles on that element to make like curtain menu e
3 min read
Create GeeksforGeeks logo using HTML and CSS
Creating a logo using HTML and CSS involves designing graphical elements with HTML tags, styling them using CSS properties such as colors, sizes, and positions, and possibly incorporating SVG graphics or images. This approach allows for custom, scalable, and interactive logo designs on web pages. Ge
2 min read
Create a Galaxy Background using HTML/CSS
In this article, we will see how to create the galaxy background using the HTML & CSS, along with knowing the basic CSS properties used & will understand it through the example. A galaxy background means a small bunch of circles having different sizes with different shades and a dark backgro
3 min read
How to Create Badges using HTML and CSS ?
This article will show you how to create a badge using HTML and CSS. Badges are simple and basic components that are used to display an indicator or count a number. This is quite useful for mail count and alerting purposes, among other things. Badges are identical to labels, with the exception that
2 min read
How to create a Hero Image using HTML and CSS ?
A Hero Image is a large image with text, often placed at the top of a webpage. Hero images can be designed using HTML and CSS. This article contains two sections. The first section attaches the image and designs the basic structure. The second section designs the images and texts on the images. The
2 min read
Create a Coupon using HTML and CSS
This article will show you how to create a coupon using HTML and CSS. A coupon is like a card containing offer details and Coupon code. We will use HTML to create the coupon structure and then add some CSS styles to make the coupon attractive. Coupon Card Preview Example: We will create a coupon car
2 min read
How to Create Avatar Images using HTML and CSS ?
This article will show you how to create an Avatar Image with the help of HTML and CSS. An Avatar is a visual representation of a user, often used in user profiles or comment sections on websites. Here, we have created a GFG logo avatar image. This avatar has 100px width and height, and border-radiu
1 min read
How to Create Neon Light Button using HTML and CSS?
The neon light button animation effect can be easily created by using HTML and CSS. By using HTML, we will design the basic structure of the button and then by using the CSS, we can create the neon light animation effect. HTML code: In this section, we will design a simple button structure using anc
2 min read
How to Create a Website Using HTML and CSS?
Creating a website using HTML and CSS is a foundational skill if you are learning web development. HTML (HyperText Markup Language) is used to structure content, while CSS (Cascading Style Sheets) is used for styling, including colors, fonts, margins, and positioning. In this article, we’ll go throu
5 min read