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的一侧

1 个答案: