试图仅操纵 div 的一侧

Question

我正在尝试用 css 操纵 div 以避免使用图像来模仿下面的图像。到目前为止我已经歪斜了，但是有没有办法抓住一个角并将它定位在水平线以下？形状看起来是一个正方形，左下角有点歪斜。我似乎无法弄清楚如何在不倾斜顶角的情况下拉动那个角。

这是我目前的情况：

.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/

试图仅操纵 div 的一侧

Trying to manipulate only One side of a div

html

css

skew