html - 试图只操纵 div 的一侧

Question

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

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

我也试过只倾斜一侧并且效果很好，但 Angular 落仍然与它的另一侧在同一条线上:

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/