如何使图像不平衡？答案

【问题标题】：how to make an image lopsided?如何使图像不平衡？
【发布时间】：2019-01-28 16:34:02
【问题描述】：

我遇到了一个网站，其中有一个不平衡的图像，我想知道它是如何完成的。我试图找出它是如何在 Chrome Inspect 工具中完成的，但不幸的是我找不到。

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

谢谢。

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

【问题讨论】：

你之前尝试过什么？如果不添加您的代码 sn-p 我们无法为您提供帮助，抱歉。
clip-path 是一个提示。
@Viira link 这是我截取屏幕截图的网站。
你可以使用变换：skewX(25deg);你需要什么学位。 developer.mozilla.org/en-US/docs/Web/CSS/transform-function/…
试试这个剪辑路径工具bennettfeely.com/clippy

标签： css clip-path

【解决方案1】：

有很多方法可以做到这一点。 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);
}

【讨论】：

【解决方案2】：

名为 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;
}

【讨论】：