CSS Transform Skew [duplicate]

Answer 1

2 more methods:

1. As seen on https://css-tricks.com/examples/ShapesOfCSS/#trapezoid you can use border:

   #box {
     border-left: 200px solid black;
     border-top: 50px solid transparent;
     border-bottom: 50px solid transparent;
     width: 0;
     height: 100px;
   }
   

   but it can't have contents, because it's all border.

   Example: http://jsfiddle.net/rudiedirkx/349x9/3112/

2. Use CSS' actual 'skew' transform:

   #box {
     width: 200px;
     height: 170px;
     margin-top: 30px;
     background-color: black;
     transform: skewY(10deg);
     position: relative;
     z-index: 1; /* doesn't work? */
   }
   #box:before {
     content: "";
     display: block;
     width: 200px;
     height: 80px;
     position: absolute;
     bottom: -40px;
     left: 0;
     background-color: black;
     transform: skewY(-20deg);
     z-index: -1; /* doesn't work? */
   }
   

   I can't seem to position the pseudo element behind the main element though, so the pseudo actually falls over the main element's content, if any.

   Example: http://jsfiddle.net/rudiedirkx/349x9/3113/