Steve Fitzpatrick

I've always wanted to find out how people create amazing things using the same CSS that (back in 1998) I believed was only for font colours. This post will go through the steps I took to make a Japanese, and then a South Korean flag in only CSS and HTML. No images, SVG or Canvas. Just common-garden HTML.

Starting Out

I started off with the Scottish flag, my own one.  I had a look at a few guides on drawing triangles with CSS (recommend: http://www.infimum.dk/HTML/slantinfo.html ) and it was fairly simple to complete.  The English and Dutch flags followed, and I finished off my triangle-based exercised with the flag of South Africa.  Here are the results in Chrome.

As I've stuck to CSS2, they all render beautifully in IE.  I'll give you a link later where you can see them for yourself.

Trying Something Different

With triangles conquered, I wanted to attempt something else - circles.  And the ultimate circle flag is Japan's : http://en.wikipedia.org/wiki/File:Flag_of_Japan.svg

As usual, I set up my flag.  Outline and a circle should do it.

     HTML
    <div id="japan" class="flag">
        <div id="circle"></div>
    </div>

     CSS
    .flag{
        position: relative;
        width: 300px; height: 200px;
        border: 1px solid #000;
        float: left;
        margin: 0 20px 20px 0;
        overflow: hidden;
        background: #fff;
    }
    #japan #circle{
        background: #c00;
        width: 100px; height: 100px;
        top: 50px; left: 100px;
    }

But, this just gives us a square. 

To turn it into a circle, I had to dip into CSS3 and use the border-radius property.  By setting the radius of the border to the same as the radius of the circle (100px / 2), it rounded the whole thing and make it circle-y.

    CSS
    #japan #circle{
        background: #c00;
        width: 100px; height: 100px;
        top: 50px; left: 100px;
   
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        -o-border-radius: 50px;
        border-radius: 50px;
    }

The complicated border-radius rules are to make sure that each of the different browsers properly renders the experimental CSS3 radius.  IE browsers lower than 9 choke on them and will ignore the rule, staying as a square circle. Forever.

But for grown-up browsers, previewing gives us....

Hurray!!
 

 

One Step Beyond

Hmmm, that looks like the start of a South Korea flag... http://en.wikipedia.org/wiki/File:Flag_of_South_Korea.svg

How the hell would I manage that?  Could I manage that?

I started with the Japanese flag and worked out how make it half blue and half red.  I mucked around for a bit with overlaying rotated triangles, but it just wasn't happening.  Luckily a big, metal exclamation mark flew down from the ceiling and smacked me in the face... CSS3 background gradients.

I'm not going to lie to you, I'm not entirely sure what's going on with background gradients (mostly because competing browsers use wildly different syntax), but by using this tool: http://www.westciv.com/tools/gradients/ I was able to get my half-red, half-blue circle.  A cheeky CSS3 rotate and it was at the correct angle.

If you're playing along at home, the HTML/CSS so far is:

    HTML
    <div id="south-korea" class="flag">
        <div id="circle"></div>
    </div>

    CSS
    #south-korea #circle{
        background: #c60c30; //dark red
       
        // same as japanese flag
        width: 100px; height: 100px;
        top: 50px; left: 100px;
        -moz-border-radius: 50px;
        border-radius: 50px;
       
        // rotate the circle clockwise
        -webkit-transform: rotate(27deg);
        -moz-transform: rotate(27deg);
        -o-transform: rotate(27deg);
        transform: rotate(27deg);
       
        // background gradients.  Haven't put one in for Opera - deal with it.
        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.41, rgb(0,52,120)),color-stop(0.5, rgb(198,12,49)));
        background-image: -moz-linear-gradient(top center, rgb(0,52,120) 50%, rgb(198,12,49) 50%);
    }

Now I had to overlay two smaller circles, one in each "corner" for the yin and yang.  I'll add them one-at a time to show what's going on.

     HTML
    <div id="south-korea" class="flag">
        <div id="circle"></div>
        <div id="yin-circle"></div>
        <div id="yang-circle"></div>
    </div>

     CSS
    #south-korea #yin-circle{
        background: #003478;
        width: 50px; height: 50px;
        bottom: 60px;  right:  105px;       
        -moz-border-radius: 25px;
        border-radius: 25px;   
     }

    CSS
    #south-korea #yang-circle{
        background: #c60c30;
        width: 50px; height: 50px;
        top: 60px; left: 105px;
        -moz-border-radius: 25px;
        border-radius: 25px;
    }

HURRAY!!

The Four Elements

To finish, all I had to do was position the four elements around the flag.  Should be easy enough, there's a top, middle and bottom bar, and some have separators inside.

    HTML
    <div id="south-korea" class="flag">
        <div id="circle"></div>       
        <div id="yin-circle"></div>   
        <div id="yang-circle"></div>   
        <div id="geon">
            <div class="top"></div>
            <div class="middle"></div>
            <div class="bottom"></div>
        </div>
        <div id="ri">
            <div class="top"></div>
            <div class="middle"><span class="sep"></span></div>
            <div class="bottom"></div>       
        </div>
        <div id="gam">
            <div class="top"><span class="sep"></span></div>
            <div class="middle"></div>
            <div class="bottom"><span class="sep"></span></div>       
        </div>
        <div id="gon">
            <div class="top"><span class="sep"></span></div>
            <div class="middle"><span class="sep"></span></div>
            <div class="bottom"><span class="sep"></span></div>       
        </div>
    </div>

    CSS
        #south-korea #geon,
        #south-korea #ri,
        #south-korea #gam,
        #south-korea #gon{width: 50px; height: 50px;}
            #south-korea #geon{top: 30px; left: 50px;}
            #south-korea #ri{bottom: 20px; left: 50px;}
            #south-korea #gam{top: 30px; right: 50px;}
            #south-korea #gon{bottom: 20px; right: 50px;}
        #south-korea .top, #south-korea .middle, #south-korea .bottom{
            height: 10px;  width: 50px;
            background: #000;
            position: relative;
            text-align: center;
            overflow: hidden;
        }
        #south-korea .middle{margin-top: 6px;}
        #south-korea .bottom{margin-top: 6px;}
        #south-korea .sep{
            position: absolute;
            height: 14px;width: 6px;
            top: -2px; left: 22px;
            background: #fff;
            margin: 0 auto;
        }

Nearly there, just a rotate on those elements and we're done!

    CSS
    #south-korea #geon{
        top: 30px; left: 50px;
   
        -moz-transform: rotate(-55deg);
        -webkit-transform: rotate(-55deg);
        transform: rotate(-55deg);
        }
    #south-korea #ri{
        bottom: 20px; left: 50px;
   
        -moz-transform: rotate(55deg);
        -webkit-transform: rotate(55deg);
        transform: rotate(55deg);
    }
    #south-korea #gam{
        top: 30px; right: 50px;
   
        -moz-transform: rotate(55deg);
        -webkit-transform: rotate(55deg);
        transform: rotate(55deg);
    }
    #south-korea #gon{
        bottom: 20px; right: 50px;
   
        -moz-transform: rotate(-55deg);
        -webkit-transform: rotate(-55deg);
        transform: rotate(-55deg);
    }

And we're done!

So, there you are.  The South Korean flag in pure CSS and HTML

Hopefully you've got something out of this.  Let me know if you try some of your own.  Eventually, when you are sufficiently inspired, you may want to have a go with something more spectacular...

Here are both the Uruguay and Croatian flags in pure HTML/CSS, no images.

Yes way! Even the goat. And the sun's nose.

Here is the link to all of the flags that I put together: http://stevefitzpatrick.co.uk/demos/flags/

Love