How create this effect 3D with CSS3 - css

Question

The effect I'm trying to make is as in this image:
http://i271.photobucket.com/albums/jj146/cosmossx/footer.jpg
I've made some progress as you can see in this FIDDLE
css:
.final{ background:#000;
width:100%;}
.triangle {
border-color: white black black black;
border-style: solid;
border-width: 15px 25px 25px 25px;
height: 0px;
width: 500px;
margin: 0 auto;
}
.triangle2 {
border-color: black white white white;
border-style: solid;
border-width: 15px 25px 25px 25px;
height: 0px;
width: 500px;
margin: 0 auto;
}
HTML:
<div class="final"> <div class="triangle"></div>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
</div>
<div class="triangle2"></div>
My question is: what would be the best way to make it?
Thanks.

Answer 1

Best approach would be using css transform function and pseudo-elements
DEMO
Source (using Sass and Autoprefixer for brevity):
<footer class="footer">
<div class="footer__main">
<div class="footer__inner">
<div class="footer__content">
<!-- content goes here -->
</div>
</div>
</div>
<div class="footer__bottom"></div>
</footer>
.footer {
height: 500px;
}
.footer__main {
height: 80%;
background: #eee;
}
.footer__bottom {
height: 20%;
background: darken(#eee, 20);
}
.footer__inner {
background: white;
max-width: 800px;
margin: 0 auto;
height: 100%;
padding: 0 20px;
position: relative;
}
.footer__content {
background: #eee;
height: 100%;
transform: translateY(20px);
position: relative;
&:before,
&:after {
content: "";
background: darken(#eee, 10);
width: 20px;
height: 100%;
position: absolute;
top: 0; bottom: 0;
z-index: 2;
}
&:before {
right: 100%;
transform-origin: 100%;
transform: skewY(45deg);
}
&:after {
transform-origin: 0;
left: 100%;
transform: skewY(-45deg);
}
}