The British Flag - version 1

Pre 2006

copyright © stu nicholls - CSS play


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:


You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

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.

Please ask permission before using or copying this example to your web site.

Please Support CSS play

Please note that if your donation is for a demo/menu then you will need to email me with the url of the demo/menu after making the donation

For more CSS demonstrations I recommend that you visit the Dynamic Drive CSS Library.

Free, practical CSS menus, layouts, and examples

Soft Geometry Creative Industries

Soft Geometry Creative Industries
is a music-based design company located in Bristol UK.
I create artwork for albums, singles, posters and t-shirts.
My work is influenced by punk and post-punk poster and flyer design,
lo-fi photocopy aesthetics,
Francis Bacon and Mark Rothko.

I can provide a start to finish service with my own art and photography, put together work from images provided by yourself, and collaborate on an idea.

Follow CSS play

Facebook   Twitter   Facebook Fan Page