ADVERTISEMENT

Create Indian Flag Using HTML and CSS

Telegram Group Join Now

ADVERTISEMENT

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.

ADVERTISEMENT

Code by Ananda B Ajith
Project Download Link Available Below
Language used HTML and CSS
External link / Dependencies No
Responsive Yes
Indian Flag Table

ADVERTISEMENT

Firstly we show the output that we create in this blog post with that Indian flag so let’s start with Html.

indian flag using CSS Html
Pure HTML & CSS

 

ADVERTISEMENT

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.

ADVERTISEMENT

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

ADVERTISEMENT

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!

ADVERTISEMENT

 

ADVERTISEMENT

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!

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT