Indian Flag using HTML & CSS

Indian Flag using HTML and CSS

Independence Day is the biggest festival of democracy for all Indians. We celebrate Independence Day every year on 15th August. On this day, we hoist our tricolor.

So we are here, in this blog we will create our tricolor or Indian flag using HTML and CSS only.

If you also want to create Indian flag, then read the complete blog.

Let's begin...

Let's write HTML

HTML

        
<div class="flag">
    <div class="saffron"></div>
    <div class="white">
        <div class="ashokChakra">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </div>
    </div>
    <div class="green"></div>
</div>
        
    

Now, add style to the HTML. i.e., CSS

CSS

        
body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}
    
.flag {
    position: relative;
    height: 600px;
    width: 800px;
}
    
.saffron {
    position: relative;
    background: #FF9933;
    height: 200px;
    width: 800px;
}
    
.white {
    position: relative;
    background: #FFFFFF;
    height: 200px;
    width: 800px;
}
    
.green {
    position: relative;
    background: #138808;
    height: 200px;
    width: 800px;
}
    
.ashokChakra {
    position: relative;
    top: 5px;
    bottom: 5px;
    height: 180px;
    width: 180px;
    border-radius: 50%;
    border: 4px solid #000080;
    background: #FFFFFF;
    margin: auto;
}
    
.ashokChakra li {
    position: relative;
    list-style: none;
    width: 176px;
    border: 2px solid #000080;
    border-radius: 50%;
}
    
li:nth-child(1) {
    top: 88px;
}
    
li:nth-child(2) {
    top: 84px;
    transform: rotate(90deg);
}
    
li:nth-child(3) {
    top: 80px;
    transform: rotate(15deg);
}
    
li:nth-child(4) {
    top: 76px;
    transform: rotate(30deg);
}
    
li:nth-child(5) {
    top: 72px;
    transform: rotate(45deg);
}
    
li:nth-child(6) {
    top: 68px;
    transform: rotate(60deg);
}
    
li:nth-child(7) {
    top: 64px;
    transform: rotate(75deg);
}
    
li:nth-child(8) {
    top: 60px;
    transform: rotate(105deg);
}
    
li:nth-child(9) {
    top: 56px;
    transform: rotate(120deg);
}
    
li:nth-child(10) {
    top: 52px;
    transform: rotate(135deg);
}
    
li:nth-child(11) {
    top: 48px;
    transform: rotate(150deg);
}
    
li:nth-child(12) {
    top: 44px;
    transform: rotate(165deg);
}
        
    

Now save your file and open in browser to see the output.

Your output looks like this

---

Join Our Social Media Connections