歪斜背景图像没有失真？

Question

我需要扭曲包含背景图像的div的形状，而不会实际扭曲背景图像。

现在我正在使用transform：skew（-25deg）

是否可以在没有失真的情况下这样做？

Answer 1

您需要在倾斜元素的子项上添加背景图像，然后对孩子应用相反的倾斜。这是一个例子：

.parent {
  height: 100px;
  overflow: hidden;
  transform: skew(0.5rad, 0);
  width: 100px;
}
.child {
  background: linear-gradient(to right, red 0%, blue 100%);
  height: 100%;
  transform: skew(-0.5rad, 0);
  width: 100%;
}

<div class="parent">
  <div class="child">
    etc.
  </div>
</div>