You are currently viewing Create Indian Flag Using HTML and CSS

Create Indian Flag Using HTML and CSS

Free Coding Ebook 👉 Get Now

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
Indian Flag Table

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

 

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>  

ADVERTISEMENT

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!

Free Coding Ebook 👉 Get Now

Leave a Reply