Using :before/:after and rotate
.
Add position:relative to .main
and footer
.
.main:after, footer:before {
content: " ";
width: 100%;
height: 40px;
background: inherit;
position: absolute;
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
transform: rotate(-1deg);
z-index: -1;
}
.main:after {
bottom: -20px;
}
footer:before {
top: -20px;
}
Working: http://jsfiddle.net/NpX23/8/