Making anything & everything in CSS3 seems to be the rage these days. So to celebrate the Republic Day of India, I decided to (finally) explore it by making the Flag of India in CSS3. Here’s the result:
And here’s the Indian Flag (SVG) on Wikipedia:
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?