css - div slanted in 2 directions

Question

Is it possible to create the following shape as a DIV in CSS.

The browser support is not important.

Answer 1

You cannot skew an element like this directly, you'll need to use two elements (or generated content) and hide certain overflow to make the flat bottom edge:

http://jsfiddle.net/6DQUY/1/

#skew {
    height: 240px;
    overflow: hidden;
}
.skew {
    background: #000;
    display: inline-block;
    height: 300px;
    width: 500px;
    margin-top: 100px;
    transform: skew(-8deg, -8deg);
}

Note: I removed the cross browser definitions for better readability.

UPDATE: This would be a more fluid example which resizes in set dimensions: http://jsfiddle.net/6DQUY/3/. Note the padding-bottom on the wrapper which defines the ratio. You may have to play around with the percentage amounts.

#skew {
    padding-bottom: 20%;
    overflow: hidden;
    position: relative;
}
.skew {
    background: #000;
    position: absolute;
    top: 30%;
    right: 8%;
    left: 8%;
    height: 100%;
    transform: skew(-8deg, -8deg);
}