How to achieve a trapezoid in CSS3?

Question

I'm trying to achieve the following container in CSS3. I tried with transform: skewY but i don't have the desired result. I know that I can achieve it with 3d Transforms, but I have in mind our lovely Internet Explorer. Also I tried to play with pseudo elements but I lost it. Is there any css rule that I can, lets say, increase the height of the top and bottom right corners?

JSFiddle

Thank you

Answer 1

You could use skewed pseudo elements for this (ensuring the skews are on the pseudos, and not the element itself):

 div { position: relative; height: 200px; width: 80vw; margin: 10vw; } div:after { content: ""; position: absolute; top: 0; left: 0; height: 90%; width: 100%; -webkit-transform: skewY(5deg); -ms-transform: skewY(5deg); transform: skewY(5deg); background: gray; z-index: -1; } div:before { content: ""; position: absolute; height: 90%; width: 100%; left: 0; bottom: -20%; background: gray; -webkit-transform: skewY(-5deg); -ms-transform: skewY(-5deg); transform: skewY(-5deg); z-index: -1; } html { background: url(http://placekitten.com/g/300/300); } 

 <div>Content!!</div>