CSSPLAY

CSS DEMOS › The British Flag - version 2

Date : 1st August 2007

For all modern browsers

This demo is too wide for your mobile screen.
Please view on a tablet or PC.

Information

Now that we have the ability to use just CSS to make transparent borders on IE5.x and IE6 I can bring you a much simplified version of the Union Flag.

Works in IE5.5, IE6, IE7, Firefox, Netscape, Mozilla, Opera and Safari (PC).

How this one is done:

The Flag container:

Position the top white triangle:

Position the left white triangle:

Position the right white triangle:

Position the bottom white triangle:

Position the top blue triangle:

Position the left blue triangle:

Position the right blue triangle:

Position the bottom blue triangle:

Position the horizontal red and white bar:

Position the top red and white vertical bar:

Position the bottom red and white vertical bar:

Copyright

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
   A support donation is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.