After viewing some recent rather interest experiments in CSS3, I decided to do some experimenting of my own. CSS3 brings a lot more variety to the table regarding what you can do with it when compared to CSS2.1. Rounded corners, scaling and rotations are all possible with just a basic knowledge of mathematics! It got me thinking, what could I create, using only CSS, that would normally require images? So, I decided to try and create some of the flags of the world.
How did I do it?
These flags were all created using XHTML and CSS. With the power of CSS3 border radius, rotate and scale, it wasn't too much of a challenge to create the geometric shapes that make up the various flags.
These should all display as intended in recent versions of Firefox, Chrome and Safari. Let me know by commenting if they aren't working, it is an experiment after all, and I'd like to know how it turned out! Apart from some jaggy edges in some diagonal lines, I think they turned out okay! Leave your comments!
