Пытаясь манипулировать только одной стороной деления

Question

Я пытаюсь манипулировать div с помощью css, чтобы не использовать изображение для подражания изображенному ниже. Пока у меня есть перекос, но есть ли способ захватить угол и расположить его ниже горизонтальной линии? Форма кажется квадратной, а нижний левый угол слегка наклонен. Кажется, я не могу понять, как тянуть этот угол без перекоса верхнего угла.

перекошенный div shsape

Вот что у меня так далеко

.educationcontentdiv {
background-color: #f9da0b;
padding: 30px;
-webkit-transform: skewY(1deg);
-moz-transform: skewY(1deg);
-ms-transform: skewY(1deg);
-o-transform: skewY(1deg);
transform: skewY(1deg);

}

Я также попытался наклонить только одну сторону, и она работает хорошо, но угол все еще находится на той же линии, что и его противоположная сторона:

margin: 0 0 0 -20px;
-webkit-transform: skew(20deg);
   -moz-transform: skew(20deg);
     -o-transform: skew(20deg);
background: red;
overflow:hidden;
position:relative;

Любая помощь будет оценена

Answer 1

Это выглядит как то, что вы могли бы искать: Матричное преобразование

http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/