Indian Flag in CSS3 – Republic Day Special!


Making anything & everything in CSS3 seems to be the rage these days. So to celebrate the Republic Day of India, I decided to (finally) play with CSS3 by making the Flag of India using it. Here’s the result:

And here’s the Indian Flag (SVG) on Wikipedia:

Flag of India on WikiMedia

I’ve been wanting to play with CSS3 for quite a while, but always ended up keeping it for later. When I found lot of country flags made in CSS3 (and surprisingly, no one made one for India), I decided to give it a shot. I’ve used pseudo elements (:before & :after) and css transform for making this.

The code is available on jsFiddle for you to explore and play around. Maybe I’ll tweak it to use nth-child and less classes next. :)

I enjoyed learning while creating this, and would love any feedback (Optimize code? Less number of DIVs?). Drop a comment!

PS: Tested in Chrome 16 (Horizontal Spoke gets pixelated), FF9 (All spokes smooth!) and IE9 (Looks lovely, ironically!). How does it look on your browser?