(CSS) 在不扭曲图像的情况下倾斜 img 帧

Question

我正在制作一个包含许多扭曲元素的网站，例如：

这还不算太糟糕，有 CSS 个转换可能会扭曲它。但是这个怎么样：

图像没有失真，只是框架被裁剪得歪斜了。 easiest/best 的方法是什么？

Answer 1

我认为this should work for you. As a Mark commented on, clip-path is a nice way to go. There are tools for getting just the right path such as Clippy。获得路径后，将其直接放入代码中。在我的演示中，我将它用于 div 包裹图像，而不是图像本身。我这样做是为了在图像顶部保留通过伪 class 添加的边框效果。

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

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 的方法类似，但支持的浏览器数量更多。

(CSS) 在不扭曲图像的情况下倾斜 img 帧

(CSS) skew img frame without distorting image

html

css

skew