In this article, we will be designing the Indian National Flag using HTML and CSS. The Flag has three colors as we all know. The topmost being saffron, white in the middle and green at the bottom. In the middle we have a blue coloured wheel, indicating Ashoka Chakra. Let’s get into the coding part and see how to create our national flag using HTML and CSS.
Step 1: Create an HTML file and copy the code given below.
HTML Code for National Flag of India:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS for Indian Flag - CodingIsEasy (Happy Independence/Republic Day)</title>
<style>
#indian-flag {
width:600px;
height:400px;
border:1px solid #ccc;
}
.stripe {
height: 134px;
width: 100%;
position:relative;
}
#saffron { background: #FF9933;}
#green { background: #138808;}
#white { background: #FFF;}
#outer-blue-ring {
width: 0px;
height: 0px;
border: 54px solid #008;
border-radius: 54px;
position:absolute;
top: 13px;
left: 246px;
}
#spoke_set {
border: 37px solid #fff;
border-radius: 47px;
position:absolute;
top: 20px;
left: 253px;
width: 20px;
height: 20px;
background:#008;
}
.f{
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
border-right: 15px solid #008;
border-left: 15px solid #008;
width:8px;
height:0px;
position:absolute;
top: 47px;
left: 28px;
top: 9px;
left:-9px
}
.f:before {
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
border-right: 27px solid #008;
border-left: 0px;
display:block;
width:0px;
height:0px;
content:"";
margin: -2px 0px 0px -41px;
}
.f:after {
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
border-right: 0px;
border-left: 27px solid #008;
display:block;
width:0px;
height:0px;
content:"";
margin: -4px 0px 0px 22px;
}
#s1:before {
border-right: 32px solid #008;
margin: -2px 0px 0px -47px;
}
#s1:after {
border-left: 32px solid #008;
}
#s1 {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
#s2 {
transform: rotate(15deg);
-ms-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-o-transform: rotate(15deg);
}
#s3 {
transform: rotate(30deg);
-ms-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#s4 {
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
#s5 {
transform: rotate(60deg);
-ms-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
#s6 {
transform: rotate(75deg);
-ms-transform: rotate(75deg);
-moz-transform: rotate(75deg);
-webkit-transform: rotate(75deg);
-o-transform: rotate(75deg);
}
#s7 {
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
#s8 {
transform: rotate(105deg);
-ms-transform: rotate(105deg);
-moz-transform: rotate(105deg);
-webkit-transform: rotate(105deg);
-o-transform: rotate(105deg);
}
#s9 {
transform: rotate(120deg);
-ms-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
-o-transform: rotate(120deg);
}
#s10{
transform: rotate(135deg);
-ms-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-o-transform: rotate(135deg);
}
#s11{
transform: rotate(150deg);
-ms-transform: rotate(150deg);
-moz-transform: rotate(150deg);
-webkit-transform: rotate(150deg);
-o-transform: rotate(150deg);
}
#s12{
transform: rotate(165deg);
-ms-transform: rotate(165deg);
-moz-transform: rotate(165deg);
-webkit-transform: rotate(165deg);
-o-transform: rotate(165deg);
}
#dot_set {
position: absolute;
top: 20px;
left: 253px;
width: 94px;
height: 94px;
}
.t {
position: absolute;
top: 43px;
left: 0px;
width:94px;
height:8px;
}
.t:before, .t:after {
content:"";
display:block;
border: 3px solid #008;
border-radius: 3px;
width: 0px;
height: 0px;
}
.t:before {
margin: 1px 0px 0px -3px;
}
.t:after {
margin: -6px 0px 0px 92px;
}
#d1 {
transform: rotate(7deg);
-ms-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-o-transform: rotate(7deg);
}
#d2 {
transform: rotate(22deg);
-ms-transform: rotate(22deg);
-moz-transform: rotate(22deg);
-webkit-transform: rotate(22deg);
-o-transform: rotate(22deg);
}
#d3 {
transform: rotate(37deg);
-ms-transform: rotate(37deg);
-moz-transform: rotate(37deg);
-webkit-transform: rotate(37deg);
-o-transform: rotate(37deg);
}
#d4 {
transform: rotate(52deg);
-ms-transform: rotate(52deg);
-moz-transform: rotate(52deg);
-webkit-transform: rotate(52deg);
-o-transform: rotate(52deg);
}
#d5 {
transform: rotate(67deg);
-ms-transform: rotate(67deg);
-moz-transform: rotate(67deg);
-webkit-transform: rotate(67deg);
-o-transform: rotate(67deg);
}
#d6 {
transform: rotate(82deg);
-ms-transform: rotate(82deg);
-moz-transform: rotate(82deg);
-webkit-transform: rotate(82deg);
-o-transform: rotate(82deg);
}
#d7 {
transform: rotate(97deg);
-ms-transform: rotate(97deg);
-moz-transform: rotate(97deg);
-webkit-transform: rotate(97deg);
-o-transform: rotate(97deg);
}
#d8 {
transform: rotate(112deg);
-ms-transform: rotate(112deg);
-moz-transform: rotate(112deg);
-webkit-transform: rotate(112deg);
-o-transform: rotate(112deg);
}
#d9 {
transform: rotate(127deg);
-ms-transform: rotate(127deg);
-moz-transform: rotate(127deg);
-webkit-transform: rotate(127deg);
-o-transform: rotate(127deg);
}
#d10{
transform: rotate(142deg);
-ms-transform: rotate(142deg);
-moz-transform: rotate(142deg);
-webkit-transform: rotate(142deg);
-o-transform: rotate(142deg);
}
#d11{
transform: rotate(157deg);
-ms-transform: rotate(157deg);
-moz-transform: rotate(157deg);
-webkit-transform: rotate(157deg);
-o-transform: rotate(157deg);
}
#d12{
transform: rotate(172deg);
-ms-transform: rotate(172deg);
-moz-transform: rotate(172deg);
-webkit-transform: rotate(172deg);
-o-transform: rotate(172deg);
}
</style>
</head>
<body>
<div id="indian-flag">
<div class="stripe" id="saffron"></div>
<div class="stripe" id="white">
<div id="outer-blue-ring"></div>
<div id="spoke_set">
<div id="s1" class="f"></div>
<div id="s2" class="f"></div>
<div id="s3" class="f"></div>
<div id="s4" class="f"></div>
<div id="s5" class="f"></div>
<div id="s6" class="f"></div>
<div id="s7" class="f"></div>
<div id="s8" class="f"></div>
<div id="s9" class="f"></div>
<div id="s10" class="f"></div>
<div id="s11" class="f"></div>
<div id="s12" class="f"></div>
</div>
<div id="dot_set">
<div id="d1" class="t"></div>
<div id="d2" class="t"></div>
<div id="d3" class="t"></div>
<div id="d4" class="t"></div>
<div id="d5" class="t"></div>
<div id="d6" class="t"></div>
<div id="d7" class="t"></div>
<div id="d8" class="t"></div>
<div id="d9" class="t"></div>
<div id="d10" class="t"></div>
<div id="d11" class="t"></div>
<div id="d12" class="t"></div>
</div>
</div>
<div class="stripe" id="green"></div>
</div>
</body>
</html>
Without adding CSS, you will see a simple blank screen. Let’s add CSS to see our application.
You can add the CSS inside the HTML file itself inside the tag or you can create a separate CSS file and link it to the HTML file. Both ways, it will give you the same result and depends on your convenience.
After adding CSS, you will see the output like this.
Output:
You can be as creative as you can. You can add a stick to the flag, create animations like rotating the wheel. Feel free to play around with the code by implementing different styles. Hope you enjoyed the tutorial.