如何使图像不平衡？

Question

我看到一个网站，其中有一张图片是不平衡的，我想知道它是怎么做到的。我试图找出它是如何在 Chrome 检查工具中完成的，但不幸的是我找不到。

我想这样做的一种方法是使用照片编辑器并将这张白色 space 添加到图片底部，然后再将其添加到页面，但他们可能使用了另一种方法导致原始图片下方没有白色 space。

谢谢。

编辑：正如答案中所述，有几种很好的方法可以做到这一点。一种是旋转图片，一种是使用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;

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

如何使图像不平衡？

how to make an image lopsided?

css

clip-path