（CSS）倾斜img框架而不扭曲图像答案

【问题标题】：(CSS) skew img frame without distorting image（CSS）倾斜img框架而不扭曲图像
【发布时间】：2016-04-20 22:06:26
【问题描述】：

我正在制作一个包含许多倾斜元素的网站，如下所示：

这还不错，有一些 CSS 转换可能会扭曲它。但是这个怎么样：

图像没有失真，只是帧被以倾斜的方式裁剪。最简单/最好的方法是什么？

【问题讨论】：

你能用clip-path吗？

【解决方案1】：

我认为this 应该适合你。正如 Mark 评论的那样，clip-path 是一个不错的选择。有一些工具可以找到正确的路径，例如Clippy。获得路径后，将其直接放入代码中。在我的演示中，我在包裹图像的div 上使用了它，而不是图像本身。我这样做是为了在图像顶部保留通过伪类添加的边框效果。

演示： http://codepen.io/antibland/pen/eZKxNa

【讨论】：

这看起来很棒。唯一的问题是只有 69.91% 的用户支持 clip-path (caniuse.com/#feat=css-clip-path)
@Mirror318 2020 年中期，支持率为 94.3%。
2021 年末，支持率为 97.47%。

【解决方案2】：

我最终使用了以下内容。它会创建一个倾斜的父节点，然后取消子节点的倾斜，使其居中并使其大到足以填充倾斜的突出位。

HTML

<div class="skewed">
  <img src="images/sad-kid.jpg">
</div>

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

输出

这类似于安迪霍夫曼的方法，但支持更多的浏览器。

【讨论】：

你得到的是我的第一次尝试。我选择了另一种方式，因为我觉得 skew/unskew 方法感觉有点脏。但我想你可以对 Polyfill 说同样的话。最终，CSS 迫使我们做坏事。