html让图片斜着,HTML – 如何倾斜/倾斜div的底部

我一直试图在div的底部添加Skew / Slant.我已经取得了一些成功,正如你在我的JSFiddle中可以看到的那样,我已经设法应用了偏差,但这并不完全是我想要的.

目前,歪斜应用于图像所在的div的顶部和底部,此歪斜似乎也应用于图像本身(如果您关闭歪斜,您将看到图像稍微旋转回正常).我想知道是否可以进行以下调整,以及我如何进行调整……

1 – 仅将歪斜应用于图像所在div的底部,而不是当前两者.

2 – 不对图像应用歪斜,使图像平放(如果有意义).

HTML

CSS

div {

background-image: green;

height: 700px;

padding: 20px;

margin-top: 100px;

-webkit-transform: skewY(-2deg);

-moz-transform: skewY(-2deg);

-ms-transform: skewY(-2deg);

-o-transform: skewY(-2deg);

transform: skewY(-2deg);

overflow:hidden;

}

提前致谢.