尝试仅操作div的一侧

Question

我正在尝试使用CSS操作div，以避免使用图片模仿下面的图片。 到目前为止，我已经偏斜了，但是有什么办法可以抓住拐角并将其定位在水平线以下？ 该形状似乎是一个正方形，其左下角有一点点歪斜。 我似乎无法弄清楚如何在不歪曲顶部角的情况下将其拉到一个角。

倾斜的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/