SkewY avec des valeurs différentes en haut et en bas

Question

Je voudrais faire une forme où le sommet est skewY -10deg et le fond est 10deg pour produire la forme comme on le voit dans l'image:

je peux ne semble pas comprendre comment accomplir cela.

Answer 1

Working Demo

Cela devrait faire l'affaire:

CSS

#test { 
    width: 200px; 
    height: 200px; 
    -webkit-transition: all 300ms ease-in; 
    background: black; 
    position: relative; 
} 

#test:after, #test:before { 
    display: block; 
    content: ""; 
    color: transparent; 
    width: 215px; 
    height: 50px; 
    background: white; 
    position: absolute; 
    left: -10px; 
    bottom: -20px; 
    -webkit-transform: rotate(12deg); 
    -moz-transform: rotate(12deg); 
} 
#test:before { 
    bottom: auto; 
    top: -20px; 
    -webkit-transform: rotate(-12deg); 
    -moz-transform: rotate(-12deg); 
} 

HTML

<div id="test"></div>