Примерно так:
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
html, body{
background-image: url(http://javascript.ru/forum/image.php?u=21902&dateline=1341411354);
}
.footer{
margin-right: 700px; /*600+50+50*/
position: relative;
top: 100px;
}
.container{
width: 600px;
margin-left: 50%;
position: relative;
top: 50px;
left: 50px;
background-image: url(http://javascript.ru/forum/images/editor/css.png);
}
.footer:before,
.footer:after,
.container:before,
.container:after {
content: '';
display: block;
width: 50%;
height: 100%;
position: absolute;
top: 0;
background-image: url(http://javascript.ru/forum/images/editor/css.png);
}
.footer:before {
left: 0;
}
.footer:after{
right: -700px;
}
.container:before,
.container:after {
width: 50px;
}
.container:before{
-webkit-transform: skewY(45deg);
-moz-transform: skewY(45deg);
-ms-transform: skewY(45deg);
-o-transform: skewY(45deg);
transform: skewY(45deg);
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0;
left: -50px;
}
.container:after{
-webkit-transform: skewY(-45deg);
-moz-transform: skewY(-45deg);
-ms-transform: skewY(-45deg);
-o-transform: skewY(-45deg);
transform: skewY(-45deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
right: -50px;
}
</style>
</head>
<body>
<div class="footer">
<div class="container">
<span style="line-height: 400px">content</span>
</div>
</div>
</body>
</html>