The Canadian Flag, In CSSMatt Readhttp://mattread.com/archives/2005/03/the-canadian-flag-in-css/2007-04-06T14:58:21-04:002013-04-25T14:35:19-04:002005-03-01T17:54:38-05:00<p>I was over at Stu Nicholls today and saw this really cool <a href="http://www.stunicholls.myby.co.uk/menu/britain.html">British flag</a> completely done up in CSS. So I investigated a little futher, figured out how to do "diagonals" in CSS, and started work on my own. </p>
<p>After wasting about an hour and a half, I came up with my version of the Canadian Flag below. Yes that's right <em>all</em> done in CSS, including the maple leaf. The maple leaf is a little ... off, but still, it was fun trying to figure out what triangles go where. And if you have IE, well it probably won't work, sorry. But let me know what you think. ...</p>
<div>
<style type="text/css">
/* <![CDATA[ */
.flag-back {
position:absolute;
top: 0;
left: 65px;
width: 200px;
height: 160px;
border-left: 50px solid #c00;
border-right: 50px solid #c00;
background-color: #fff;
}
.main-tri {
display:block;
width:0;
height:0;
overflow:hidden;
border-right:42px solid #fff;
border-left:42px solid #fff;
border-bottom:120px solid #c00;
position:absolute;
top: 5px;
left: 170px;
z-index: 3;
}
.sec-main-tri {
display:block;
width:25px;
height:0;
overflow:hidden;
border-right:20px solid transparent;
border-left:20px solid transparent;
border-top:60px solid #c00;
position:absolute;
top: 45px;
left: 180px;
z-index: 3;
}
.right-main-tri {
display:block;
width:0;
height:0;
overflow:hidden;
border-right:50px solid transparent;
border-top:50px solid #c00;
position:absolute;
top: 75px;
left: 235px;
z-index: 5;
}
.right-top-tri {
display:block;
width:0;
height:0;
overflow:hidden;
border-right:20px solid #c00;
border-top:20px solid transparent;
position:absolute;
top: 55px;
left: 235px;
z-index: 5;
}
.right-bot-tri {
display:block;
width:0;
height:0;
overflow:hidden;
border-left:30px solid #c00;
border-top:30px solid transparent;
position:absolute;
top: 82px;
left: 250px;
z-index: 5;
}
.left-main-tri {
display:block;
width:0;
height:0;
overflow:hidden;
border-left:50px solid transparent;
border-top:50px solid #c00;
position:absolute;
top: 75px;
left: 145px;
z-index: 5;
}
.left-top-tri {
display:block;
width:0;
height:0;
overflow:hidden;
border-left:20px solid #c00;
border-top:20px solid transparent;
position:absolute;
top: 55px;
left: 170px;
z-index: 5;
}
.left-bot-tri {
display:block;
width:0;
height:0;
overflow:hidden;
border-right:30px solid #c00;
border-top:30px solid transparent;
position:absolute;
top: 82px;
left: 150px;
z-index: 5;
}
.stem {
display:block;
width:10px;
height:20px;
background-color:#c00;
overflow:hidden;
position:absolute;
top: 125px;
left: 206px;
z-index: 5;
}
/* ]]> */
</style>
<h2>CSS Flag</h2>
<div style="position:relative; height: 200px;">
<div class="flag-back"> </div>
<div class="main-tri"> </div>
<div class="sec-main-tri"> </div>
<div class="left-top-tri"> </div>
<div class="left-main-tri"> </div>
<div class="left-bot-tri"> </div>
<div class="right-top-tri"> </div>
<div class="right-main-tri"> </div>
<div class="right-bot-tri"> </div>
<div class="stem"> </div>
</div>
</div>