Steve Fitzpatrick

Playing with HTML and CSS to create flags out of nothing has been great fun, especially when it leads me to discover tags and elements that I had never previously happened upon.

While putting together The Gambia flag, I was convinced that I could somehow draw five different stripes by using a single HTML div.  And I've found out how.

OUTLINE
I found the CSS "Outline" tag while using the excellent http://css3generator.com . It's a CSS2 tag, but I'd never really noticed it before, what with IE completely ignoring its existence since ever.

Layman-ly it allows you to put a second border around your element.  And I've used this to create a double-border effect and draw a North Korea flag.

HTML
    <div id="north-korea" class="flag" title="North Korea">
        <div class="stripes"></div>
    </div>

CSS
    #north-korea .stripes{
        top: 33px; /* The box doesn't start at the offset tag, but the old-style border. */

                height: 122px; width: 300px;  /* Red bit is 122px high */

        background: #ed1d25;  /* Red background */

        border-top: 6px solid #fff;  /* Top white border    */
        border-bottom: 6px solid #fff;  /* Bottom white border */

        outline: 33px solid #034da2;  /* Top and bottom blue bits.  Left and right do exist, but my main flag has an overflow: hidden (see below) */
    }

    .flag{
        display: block; position: relative;
        width: 300px;
        height: 200px;
        border: 1px solid #000;
        float: left;
        margin: 0 20px 20px 0;
        overflow: hidden;
        background: #fff;
    }

So, there you have it, a nice new CSS rule for me to abuse.

And here's the finished CSS/HTML-only North Korea flag. 

Love and beer.

All flags: http://stevefitzpatrick.co.uk/demos/flags/