div наклонен в 2-х направлениях

Вы не можете наклонить такой элемент напрямую, вам нужно будет использовать два элемента (или сгенерированный контент) и скрыть определенное переполнение, чтобы сделать нижний край плоским:

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);
}

Примечание. Я удалил кроссбраузерные определения для лучшей читабельности.

ОБНОВЛЕНИЕ: Это будет более плавный пример, размер которого изменяется в заданных размерах: http://jsfiddle.net/6DQUY/3 /. Обратите внимание на нижний отступ на обертке, который определяет соотношение. Возможно, вам придется поиграть с процентными суммами.

#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);
}

Использование SVG:

Ниже приведен пример использования SVG polygon, который также можно легко масштабировать. Текст (при необходимости) можно расположить абсолютно над фигурой.

.shape-svg {
  position: relative;
  height: 100px;
  width: 300px;
}
svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
polygon {
  fill: black;
}

/* Just for demo*/

.shape-svg{
  transition: all 1s;
}
.shape-svg:hover {
  height: 200px;
  width: 600px;
}

<div class="shape-svg">
  <svg viewBox='0 0 100 100' preserveAspectRatio='none'>
    <polygon points='5,35 100,0 95,100 0,100' />
  </svg>
</div>

Фигура может быть создана с использованием контура обрезки SVG вместо полигона.

Использование CSS и отдельного элемента:

Та же форма может быть достигнута с помощью CSS, используя только один элемент. Ключевым моментом является установка transform-origin в качестве стороны, которая должна быть прямой.

.shape{
  height: 100px;
  width: 300px;
  margin-top: 50px;
  background: black;
  transform-origin: 0% bottom;
  transform: perspective(300px) rotateY(-15deg) skewX(-10deg);
  transition: all 1s;
}
.shape:hover{
  width: 350px;
  height: 150px;
  transform: perspective(450px) rotateY(-15deg) skewX(-10deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="shape"></div>

Форма, полученная с помощью этого метода, также может быть масштабирована. Однако по мере увеличения высоты фигуры правая сторона становится выше и поднимает правый верхний угол еще выше. Таким образом, нужно либо уменьшить угол поворота (или) увеличить перспективу (форму нужно отодвинуть подальше), чтобы высота правой стороны оставалась достаточно малой и находилась в пределах области обзора. В противном случае нужно увеличить margin-top.

Ниже приведено объяснение, почему это происходит:

• Рассмотрим прямоугольник, расположенный на расстоянии 300 пикселей от глаза зрителя. Он поворачивается к зрителю, и по мере вращения сторона, которая приближается к пользователю, кажется выше другой стороны.
• Мы зафиксировали координату x начала преобразования как 0%, поэтому высота левой стороны фигуры будет постоянной, а высота правой стороны будет увеличиваться в зависимости от угла поворота.
• Поскольку координата y начала преобразования является нижней, нижняя сторона фигуры будет оставаться прямой, а любое увеличение высоты с правой стороны элемента будет проецироваться вверх, что приведет к тому, что фигура выйдет за пределы экрана.

Такой проблемы не возникает, если увеличивается только ширина, потому что угол поворота слишком минимален, и поэтому правая сторона фигуры никогда не окажется достаточно близко к зрителю, чтобы казаться очень высокой.

Рассматриваемая форма не является точной копией той, что обсуждалась здесь, но вы можете получить еще несколько идей, посмотрев на него :)

Вы можете изучить преобразования CSS (transform). Я создал JsFiddle с помощью быстрого пример.

HTML

<div class="skew"></div>

CSS

/* Skew the container one way */
.skew {
    background: #000;
    display: inline-block;
    height: 50px;
    width: 500px;
    margin-top: 100px;
    -webkit-transform: skewY(-5deg);
    -moz-transform: skewY(-5deg);
    -ms-transform: skewY(-5deg);
    -o-transform: skewY(-5deg);
    transform: skewY(-5deg);
}

ПРИМЕЧАНИЕ:

Возможно, вам придется включить другие преобразования, чтобы получить несбалансированный вид.

--ИЗМЕНИТЬ--

Вот еще одно решение, но с использованием :before и :after CSS. JsFiddle.