如何使图像偏斜？

Question

我偶然发现一个网站，其中有一张图片歪斜，我想知道它是如何完成的。我试图找出如何在Chrome Inspect工具中完成操作，但很遗憾，我找不到。

我想这样做的一种方法是使用照片编辑器，然后在将其添加到页面之前在图片底部添加此空白，但是他们可能使用了另一种方法，因为原始图像没有它下面的空白。

谢谢。

EDIT ：正如答案中所述，有几种不错的方法。一种是旋转图片，另一种是使用Clip-Path。
我知道这个问题不是那么根本，但是出于好奇我只是问了这个问题。
干杯

Answer 1

名为av-extra-border-inner的div旋转了-5度 他们添加了以下内容

.av-extra-border-inner
    {
     width:110%;
     position:absolute;
    }

使其连接到div

取消选中我在此处注释掉的行，然后查看结果。

您可以在此处找到有关剪切和遮罩的更多信息：https://css-tricks.com/clipping-masking-css/

.avia_transform .av-extra-border-element.border-extra-diagonal.border-extra-diagonal-inverse .av-extra-border-inner {
    /* -webkit-transform: rotate(-5deg); */
    /*transform: rotate(-5deg);*/
    -webkit-transform-origin: left top;
    transform-origin: left top;
    right: auto;
    left: 0;
}

Answer 2

有很多方法可以做到这一点。 clip-path是一种选择； transform: rotate(Ndeg)是另一个。实现此目的的另一种方法是使用skew;

    <div class="skewed">
      <div class="image"></div>
    </div>

.skewed {
  height: 40vw;
  overflow: hidden;
  transform: skewY(-10deg) translateY(-50%);
}
.skewed .image {
  height:150%;
  background-size: 100%;
  transform: skewY(10deg);
  background-image: url(your/image.jpg);
}