header shape with no images needed
by Joe Saad
HTML
<div class="c-main">
<div class="c-head g"></div>
<div class="c-mid o"></div>
<div class="c-end b"></div>
</div>CSS
div {float:left;}
.c-main {width:300px; height:20px; }
.c-main div {height:100%;}
.c-head {width:75%;}
.c-mid {width:5%;}
.c-end {width:15%;}
.b {background-color:blue; border:1px solid blue;}
.y {background-color:yellow; border:1px solid yellow;}
.o {background-color:orange; border:1px solid orange;}
.g {background-color:gray; border:1px solid gray;}