html - 倾斜时保持图像不旋转？

Question

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

但是当倾斜时，图像似乎坏了，我想保持图像不旋转。

我的代码是这样的:

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

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

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

相同的图像。

我截取了一个倾斜的图片元素，但应该不是旋转。

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/