Indian Flag in CSS3 – Republic Day Special!

Indian Flag in CSS3 – Republic Day Special!

January 26, 2012 1:13 PM 14 comments

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:

Flag Of India (SVG) - Wikipedia

Flag Of India (SVG) - 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?

  • Kinshuk Kar

    Nicely done!!! keep up the awesome work!!

    • http://rasagy.in/blog/ Rasagy Sharma

      Thanks KK! :)

  • http://rasagy.in/blog/ Rasagy Sharma

    Interesting! Glad to see more people playing with the new CSS features. :)

    • http://twitter.com/JSushil sushil bharwani

      I was also willing to do a blue ring. But could not figure that out liked the way you implemented it :-) I think the way you did the ring is awesome. You should have a post about explaining everything that made the entire chakra.

      • http://rasagy.in/blog/ Rasagy Sharma

        Sure, that sounds like a good idea for a follow-up post. :)

  • http://sanatgersappa.tumblr.com/ Sanat Gersappa

    Awesome. Looks great on both IE9 and IE9 mobile.

    • http://rasagy.in/blog/ Rasagy Sharma

      Thanks Sanat, even I was quite impressed with how IE rendered it. :)

  • Deepanshu Mehndiratta

    Nicely done. Specially the spokes part.

    • https://twitter.com/rasagy Rasagy Sharma

      Thanks! Yes, spokes was the most interesting part. :)

  • http://www.facebook.com/people/Pranay-Airan/684237866 Pranay Airan

    Lovely :)

    • https://twitter.com/rasagy Rasagy Sharma

      Thanks! Glad you liked it.

  • http://twitter.com/r0unak Rounak Jain

    stop making fun of IE9 will ya :P

    • https://twitter.com/rasagy Rasagy Sharma

      For the first time, IE rendered something better than Chrome. I can’t dare mock it now! :D

  • http://gauravmishra.com/ Gaurav Mishra

    Very GoooD! :-D