Create Indian Flag Using HTML and CSS
Hello, guys welcome to the Codewithrandom blog, in this blog post we create our Indian flag using HTML and CSS.
| Code by | Ananda B Ajith |
| Project Download | Link Available Below |
| Language used | HTML and CSS |
| External link / Dependencies | No |
| Responsive | Yes |
Firstly we show the output that we create in this blog post with that Indian flag so let’s start with Html.
 |
| Pure HTML & CSS |
HTML Code For Indian Flag
<div id="flag">
<div class="stripe" id="saffron"></div>
<div class="stripe" id="white">
<div id="outer-blue-ring"></div>
<div id="spoke_set">
<div id="ss1" class="sc"></div>
<div id="ss2" class="sc"></div>
<div id="ss3" class="sc"></div>
<div id="ss4" class="sc"></div>
<div id="ss5" class="sc"></div>
<div id="ss6" class="sc"></div>
<div id="ss7" class="sc"></div>
<div id="ss8" class="sc"></div>
<div id="ss9" class="sc"></div>
<div id="ss10" class="sc"></div>
<div id="ss11" class="sc"></div>
<div id="ss12" class="sc"></div>
</div>
<div id="dot_set">
<div id="ds1" class="dc"></div>
<div id="ds2" class="dc"></div>
<div id="ds3" class="dc"></div>
<div id="ds4" class="dc"></div>
<div id="ds5" class="dc"></div>
<div id="ds6" class="dc"></div>
<div id="ds7" class="dc"></div>
<div id="ds8" class="dc"></div>
<div id="ds9" class="dc"></div>
<div id="ds10" class="dc"></div>
<div id="ds11" class="dc"></div>
<div id="ds12" class="dc"></div>
</div>
</div>
<div class="stripe" id="green"></div>
</div>
That’s the Html section we use for making our Indian flag. Yeah, it looks like a very big part of Html but we create it with pure HTML and the help of CSS, so now move to our CSS file.
Portfolio Website using HTML and CSS (Source Code)
CSS Code For Indian Flag
#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;
}
.sc {
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
}
.sc: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;
}
.sc: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;
}
#ss1:before {
border-right: 32px solid #008;
margin: -2px 0px 0px -47px;
}
#ss1:after {
border-left: 32px solid #008;
}
#ss1 {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
#ss2 {
transform: rotate(15deg);
-ms-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-o-transform: rotate(15deg);
}
#ss3 {
transform: rotate(30deg);
-ms-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#ss4 {
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
#ss5 {
transform: rotate(60deg);
-ms-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
#ss6 {
transform: rotate(75deg);
-ms-transform: rotate(75deg);
-moz-transform: rotate(75deg);
-webkit-transform: rotate(75deg);
-o-transform: rotate(75deg);
}
#ss7 {
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
#ss8 {
transform: rotate(105deg);
-ms-transform: rotate(105deg);
-moz-transform: rotate(105deg);
-webkit-transform: rotate(105deg);
-o-transform: rotate(105deg);
}
#ss9 {
transform: rotate(120deg);
-ms-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
-o-transform: rotate(120deg);
}
#ss10{
transform: rotate(135deg);
-ms-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-o-transform: rotate(135deg);
}
#ss11{
transform: rotate(150deg);
-ms-transform: rotate(150deg);
-moz-transform: rotate(150deg);
-webkit-transform: rotate(150deg);
-o-transform: rotate(150deg);
}
#ss12{
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;
}
.dc {
position: absolute;
top: 43px;
left: 0px;
width:94px;
height:8px;
}
.dc:before, .dc:after {
content:"";
display:block;
border: 3px solid #008;
border-radius: 3px;
width: 0px;
height: 0px;
}
.dc:before {
margin: 1px 0px 0px -3px;
}
.dc:after {
margin: -6px 0px 0px 92px;
}
#ds1 {
transform: rotate(7deg);
-ms-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-o-transform: rotate(7deg);
}
#ds2 {
transform: rotate(22deg);
-ms-transform: rotate(22deg);
-moz-transform: rotate(22deg);
-webkit-transform: rotate(22deg);
-o-transform: rotate(22deg);
}
#ds3 {
transform: rotate(37deg);
-ms-transform: rotate(37deg);
-moz-transform: rotate(37deg);
-webkit-transform: rotate(37deg);
-o-transform: rotate(37deg);
}
#ds4 {
transform: rotate(52deg);
-ms-transform: rotate(52deg);
-moz-transform: rotate(52deg);
-webkit-transform: rotate(52deg);
-o-transform: rotate(52deg);
}
#ds5 {
transform: rotate(67deg);
-ms-transform: rotate(67deg);
-moz-transform: rotate(67deg);
-webkit-transform: rotate(67deg);
-o-transform: rotate(67deg);
}
#ds6 {
transform: rotate(82deg);
-ms-transform: rotate(82deg);
-moz-transform: rotate(82deg);
-webkit-transform: rotate(82deg);
-o-transform: rotate(82deg);
}
#ds7 {
transform: rotate(97deg);
-ms-transform: rotate(97deg);
-moz-transform: rotate(97deg);
-webkit-transform: rotate(97deg);
-o-transform: rotate(97deg);
}
#ds8 {
transform: rotate(112deg);
-ms-transform: rotate(112deg);
-moz-transform: rotate(112deg);
-webkit-transform: rotate(112deg);
-o-transform: rotate(112deg);
}
#ds9 {
transform: rotate(127deg);
-ms-transform: rotate(127deg);
-moz-transform: rotate(127deg);
-webkit-transform: rotate(127deg);
-o-transform: rotate(127deg);
}
#ds10{
transform: rotate(142deg);
-ms-transform: rotate(142deg);
-moz-transform: rotate(142deg);
-webkit-transform: rotate(142deg);
-o-transform: rotate(142deg);
}
#ds11{
transform: rotate(157deg);
-ms-transform: rotate(157deg);
-moz-transform: rotate(157deg);
-webkit-transform: rotate(157deg);
-o-transform: rotate(157deg);
}
#ds12{
transform: rotate(172deg);
-ms-transform: rotate(172deg);
-moz-transform: rotate(172deg);
-webkit-transform: rotate(172deg);
-o-transform: rotate(172deg);
}
Here is all the CSS code, yeah it’s 273 lines of CSS code but in end, we do proud work on independence day! Also, meet the man who creates this amazing India flag with HTML CSS.
50+ HTML, CSS & JavaScript Projects With Source Code
Final Output Of Indian Flag Using HTML and CSS
Code by – Ananda B Ajith
Written by – codewithrandoom/Anki
Everyone’s journey starts as Beginner so if you have any type of confusion drop a comment we are here to reply & provide the best information regarding your comment. Thank you for reading!
Which code editor do you use for Indian Flag coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
is this project responsive or not?
Yes! this is a responsive project
Do you use any external links to create this project?
No!
