Diagonal boxes

Uses Psuedo elements to fake diagonal borders.

by meetaaronsilber

HTML

<header></header>
<div id="main"></div>
<footer></footer>

CSS

body { background: #444; padding: 0; overflow-x: hidden;}

header, #main, footer { width: 100%; }

header, footer { height: 200px; background: orange;}
#main { height: 300px; position: relative;}

#main:before { 
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: -50px;
    left: 0px;
    border-top: 50px solid transparent;
    border-right: 1600px solid #444;
    border-bottom: 0px solid transparent;
}