html - 倾斜图像而不扭曲它

Question

我可以在不扭曲图像的情况下对图像执行此效果吗？我尝试使用 css 的倾斜效果，但它以某种方式旋转图像并裁剪一半，我希望它保持原样，大小和所有内容都相同，但边缘像附加的图像一样，这是我的代码:

div.skewed {
  position: relative;
  height: 140px;
  transform: skew(-2deg) rotate(2deg);
  -webkit-transform: skew(-2deg) rotate(2deg);
  -moz-transform: skew(-2deg) rotate(2deg);
  overflow: hidden;
}

div.skewed > * {
  width: 110%;
  position: absolute;
  top: 50%;
  transform: skew(2deg) rotate(-2deg) translateY(-50%);
  -webkit-transform: skew(2deg) rotate(-2deg) translateY(-50%);
  -moz-transform: skew(2deg) rotate(-2deg) translateY(-50%);
}

<div class="skewed">
  <img src="https://www.todaysparent.com/wp-content/uploads/2013/04/sleeping-baby-article.jpg">
</div>

Answer 1

您可以使用 clip-path裁剪图像而不扭曲它。使用 polygon 函数，您可以通过提供单个 Angular 的 x、y 坐标列表来指定自定义形状。如果您使用像 % 这样的相对单位，它甚至可以响应。

img {
  width: 25%; /* for demonstration purposes */
  clip-path: polygon(0 0, 60% 0, 100% 30%, 100% 100%, 0 70%);
}

<img src="https://www.todaysparent.com/wp-content/uploads/2013/04/sleeping-baby-article.jpg">

好的

• 需要最少的代码(仅 1 个简单的 CSS 规则)
• 保持透明度(您可以设置任何背景)
• 响应式(您可以轻松缩放图像)

不太好

• Browser compatibility