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.
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.
Sarfraz Ahmed's Blog 
zabardast 😀
Nice tip 🙂
زبردست
good blog
🙂