Indian Flag (v1)

by rasagy

HTML

<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="spoke_couple"></div>
                <div id="ss2" class="spoke_couple"></div>
                <div id="ss3" class="spoke_couple"></div>
                <div id="ss4" class="spoke_couple"></div>
                <div id="ss5" class="spoke_couple"></div>
                <div id="ss6" class="spoke_couple"></div>
                <div id="ss7" class="spoke_couple"></div>
                <div id="ss8" class="spoke_couple"></div>
                <div id="ss9" class="spoke_couple"></div>
                <div id="ss10" class="spoke_couple"></div>
                <div id="ss11" class="spoke_couple"></div>
                <div id="ss12" class="spoke_couple"></div>
            </div>            
            <div id="dot_set">
                <div id="ds1" class="dot_couple"></div>
                <div id="ds2" class="dot_couple"></div>
                <div id="ds3" class="dot_couple"></div>
                <div id="ds4" class="dot_couple"></div>
                <div id="ds5" class="dot_couple"></div>
                <div id="ds6" class="dot_couple"></div>
                <div id="ds7" class="dot_couple"></div>
                <div id="ds8" class="dot_couple"></div>
                <div id="ds9" class="dot_couple"></div>
                <div id="ds10" class="dot_couple"></div>
                <div id="ds11" class="dot_couple"></div>
                <div id="ds12" class="dot_couple"></div>
            </div>            
        </div>
        <div class="stripe" id="green"></div>
</div>

CSS

#flag {
    width:600px;
    height:400px;
    border:2px solid #ccc;
}

.stripe  { 
    height: 134px; /* 1/3 of 400 */
    width: 100%; 
    position:relative;
}
#saffron { background: #FF9933;}
#green   { background: #138808;}
#white   { background: #FFF;}

/* Blue Wheel Starts Here */
#outer-blue-ring {
    width: 0px;
    height: 0px;    
    border: 54px solid #008;
    border-radius: 54px;
    position:absolute;
    top: 13px;
    left: 246px;
}

/* Spokes container - Also gives the white & inner blue ring */
#spoke_set {
    border: 37px solid #fff;
    border-radius: 47px;
    position:absolute;    
    top: 20px;
    left: 253px;
    width:  20px;
    height: 20px;
    background:#008;
}

/* Set of 2 Spokes */
.spoke_couple {
    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
}
.spoke_couple: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;
}
.spoke_couple: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;
}

/* Hack to make horizontal pixelated spoke longer */

#ss1:before {
    border-right: 32px solid #008;
    margin: -2px 0px 0px -47px;
}
#ss1:after {
    border-left: 32px solid #008;
}

/* Rotating Spoke Sets */
#ss1 {
    transform:         rotate(0deg);
    -ms-transform:     rotate(0deg);
    -moz-transform:    rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform:      rotate(0deg);
}
#ss2 {
    transform:         rotate(15deg);
   ...

JavaScript

/*
Created by Rasagy Sharma 
More on: http://rasagy.in/blog/2012/01/indian-flag-in-css3-republic-day-india-special/
*/