歪斜时保持图像不旋转？

Question

我想在图像中剪切小元素。所以，我正在使用skew来执行此操作。

但是当歪斜时，图像似乎破碎了，我想保持图像不旋转。

我的代码是这样的：

＆＃13;

＆＃13;

.image-skew{
/*   transform: skewX(-25deg); */
  position: absolute;
  width: 100%;
  height: auto;
}

.img-skew-invest {
  transform: skewX(-25deg);
  display: flex;
}

＆＃13;

<div class="image-skew">
  <img class="img-skew-invest" src="http://thebusiness.vn/uploads/business360/chuyenkinhdoanh/lazada-co-noi-got-foodpanda-roi-khoi-viet-nam/lazada-co-noi-got-foodpanda-roi-khoi-viet-nam.png" alt="" style="width: 100%; height: auto"/>
</div>

＆＃13;

＆＃13;

＆＃13;

相同的形象。

我用歪斜切割了图片的元素，但它应该是不旋转的。

Answer 1

clip-path符合您的要求：

.image-skew {
-webkit-clip-path: polygon(25% 0, 100% 0, 100% 75%, 75% 100%, 0 100%, 0% 25%);
clip-path: polygon(25% 0, 100% 0, 100% 75%, 75% 100%, 0 100%, 0% 25%);
}

亲自试用：https://jsfiddle.net/hgzsr5f5/1/或尝试剪辑路径生成器：http://bennettfeely.com/clippy/