Question

我正在创建一个包含许多偏斜元素的网站，如下所示：

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

图像不会失真，只是框架会以偏斜的方式裁剪。最简单/最好的方法是什么？

Answer 1

我最终使用了以下内容。它创建了一个倾斜的父母，然后疏忽了孩子，使其居中并使其足够大以填补偏斜的伸出位。

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

Answer 2

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

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

（CSS）倾斜img帧而不扭曲图像

2 个答案: