（CSS）扭曲图像框架而不失真

Question

我正在制作一个包含许多倾斜元素的网站，例如这样：

这还不算太糟糕，有一些CSS转换可以将其倾斜。但是这个呢：

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

- Mirror318

---

你能使用 clip-path 吗？ - psdpainter

Answer 1

我认为这个对你有用。正如Mark所评论的那样，clip-path是一个不错的选择。有一些工具可以帮助你获得正确的路径，例如Clippy。一旦你获得了路径，就可以将其直接放入代码中。在我的演示中，我将其用于包裹图像的

，而不是图像本身。我这样做是为了保持伪类添加的边框效果在图像上方。

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

- Andy Hoffman

---

这看起来很棒。唯一的问题是，clip-path仅受到69.91％的用户支持（http://caniuse.com/#feat=css-clip-path）。 - Mirror318

@Mirror318 在2020年中期，支持率为94.3%。 - Andy Hoffman

2021年末，支持率为97.47%。 - Andy Hoffman

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

输出

这类似于Andy Hoffman的方法，但支持更多的浏览器。

- Mirror318

---

你所看到的是我的第一次尝试。我选择了不同的方法，因为我觉得倾斜/反倾斜方法感觉有点不太好。但我想你也可以这样说Polyfill。最终，CSS迫使我们做出不好的事情。 - Andy Hoffman