HTML – 如何倾斜倾斜div的底部

概述我一直试图在div的底部添加Skew / Slant.我已经取得了一些成功,正如你在我的JSFiddle中可以看到的那样,我已经设法应用了偏差,但这并不完全是我想要的. https://jsfiddle.net/hcow6kjr/ 目前,歪斜应用于图像所在的div的顶部和底部,此歪斜似乎也应用于图像本身(如果您关闭歪斜,您将看到图像稍微旋转回正常).我想知道是否可以进行以下调整,以及我如何进行调整 我一直试图在div的底部添加Skew / Slant.我已经取得了一些成功,正如你在我的Jsfiddle中可以看到的那样,我已经设法应用了偏差,但这并不完全是我想要的.

https://jsfiddle.net/hcow6kjr/

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

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

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

HTML

<div><h1><img src="http://www.visiontechautomotive.co.uk/visiontech/wordpress/wp-content/uploads/2016/08/visiontech-hero-test-1.jpg"></h1></div>

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;}

提前致谢.

解决方法 给你的< img>通过添加transform：skewY(2deg);来反对你的div的偏斜.这只会扭曲图像的底部.

CSS

img {  -webkit-transform: skewY(2deg);  -moz-transform: skewY(2deg);  -ms-transform: skewY(2deg);  -o-transform: skewY(2deg);  transform: skewY(2deg);}

结果

JSFiddle

总结

以上是内存溢出为你收集整理的HTML – 如何倾斜/倾斜div的底部全部内容，希望文章能够帮你解决HTML – 如何倾斜/倾斜div的底部所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。