Skip to content
Related Articles

Related Articles

Improve Article

Create Indian Flag using HTML and CSS

  • Last Updated : 27 Aug, 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 thi:

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>

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;
  }
 
  .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: 
 

 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :