Sass-y Norwegian Flag

Norwegian flag from HTML and SCSS. Using SCSS allows easy resizing and converts dimensions math into simple fractions.

by austegard

HTML

<div id="flag">
    <div id="wv"></div>
    <div id="wh"></div>
    <div id="bv"></div>
    <div id="bh"></div>
</div>

SCSS

$width: 823px;
$height: $width * 16/22;
#flag {position:relative; top: 20px; left: 20px; width: $width; height: $height; background-color: #EF2B2D;} 
#flag div {position: absolute; margin: 0px; padding: 0px; border: 0}
#wv, #wh {background-color: #FFF; z-index:1;}
#bv, #bh {background-color: #002868; z-index:2;}
#wv, #bv {top: 0; height: $height}
#wh, #bh {left: 0; width: $width}
#wv {left: $width*6/22; width: $width*4/22}
#bv {left: $width*7/22; width: $width*2/22}
#wh {top: $height*6/16; height: $height*4/16}
#bh {top: $height*7/16; height: $height*2/16}