Mobile Friendly Website


Doing it with style

CSS DEMOSThe British Flag - version 1

Date : Pre 2006

For all modern browsers

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


This has been inspired by Maurício Samy Silva ~ UK Flag

I was a little disappointed that Maurício's flag was not available to IE users (stopping a high percentage of visitors from seeing our beautiful flag) so set about rectifying this.

The above is an accurate 1:2 representation of the Union Jack with it's offset diagonal red cross (so that you know which way up it goes). See Union Jack Contruction.

As with Maurício's flag, this has all been done using 'border art' but with my version there is no need for border transparencies.

Works in IE5.5, IE6, FF, Mozilla and Opera.

This example shows how to break simple images into easily constructed blocks and triangles and use layering to get the desired results.

28th April 2005

To clarify the correct way to fly the union flag (the word "jack" should only be used when the flag is flown from a "Jackstaff" ie onboard a ship):

Note that it is NOT symmetrical! Look at the white diagonals. You fly the flag the right way up with the wider white diagonal on top, next to the pole. As usual, the pole is assumed to be on the left here.

Flying the flag upside down is "lese Majeste" (which means: insulting the Crown), and is theoretically still a crime in the UK and its commonwealth! It can, however, be flown upside down as a distress signal.

How its is done


The .flag container:

The .top_blue inverted pyramid:

The .bottom_blue pyramid:

The .left_blue left pyramid:

The .right_blue right pyramid:

The .horiz horizontal red/white bar:

The .top_vert top vertical red/white bar:

The .bot_vert bottom vertical red/white bar:

The .bka series of diagonal containers:

The .lrtb_left diagonal left/right/top/bottom ~ left end:

The .lrtb_right diagonal left/right/top/bottom ~ right end:

The .lrbt_left diagonal left/right/bottom/top ~ left end:

The .lrbt_right diagonal left/right/bottom/top ~ right end:

Putting it all together

Putting the ends into the diagonal containers:

top/left to bottom/right:

and bottom/left to top/right:

Position the top blue pyramid:

Position the bottom blue pyramid:

Position the left blue pyramid:

Position the right blue pyramid:

Position the horizontal red/white bar (on top of the left/right pyramids):

Position the top vertical red/white bar (on top of the top blue pyramid):

Position the bottom vertical red/white bar (on top of the bottom blue pyramid):

Stagger the diagonal boxes from top/left to bottom/right using absolute positions. Increasing x values by 16px and y values by 8px and skipping the horizontal bar:

And finally stagger the diagonal boxes from bottom/left to top/right using absolute positions. Increasing x values by 16px and decreasing y values by 8px and again skipping the horizontal bar:

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} 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.


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page