Flag of Pakistan with pure CSS

With no much work on the first day in new company I have joined, a sudden thought of creating Pakistan’s flag with pure CSS came into my mind. So I started off with that and came up with the desired result using CSS only.

See the Flag of Pakistan

Creating orange stick, white and green rectangles with specified background color was easiest part. As for moon, naturally I used the border-radius CSS3 property. Basically I created two divs with border-radius value set to 90px to create perfect round shape (360/4 = 90). I gave the background color of white and green to these divs and used absolute positioning and z-index to put green round shape over the white round shape but at little distance so that the white div looks like a moon. I would suggest you to know this very useful  CSS trick, something I knew about and used throughout the creation of the flag.

Absolute Positioning Inside Relative Positioning

You know CSS3 isn’t supported in IE<=8, so I used CSS3Pie to get the support for border-radius CSS3 property in IE including IE6.

The trickiest part was creating the star shape but then again once you know how to create CSS triangles, things become easier. To get the star working correctly in buggy as always IE, I used the CSS conditional comments. The star looks slightly bigger in IE but still not bad the effort.

The flag was tested working fine in FF 3.6, IE 6 and above, Chrome and Safari.

Download Source


5 thoughts on “Flag of Pakistan with pure CSS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s