如何仅在父元素中使用倾斜？

Question

有没有办法只在父元素中使用倾斜（skew）？我需要创建类似于“钻石”形状的蒙版，但不能影响子元素。在这种情况下，无法使用png作为蒙版。谢谢！

- Túlio Ribeiro

Answer 1

非常简单，你只需要为孩子们解除歪斜的效果。解除歪斜的意思是应用另一个歪斜变换，但这次相反的角度。

.parent { transform: skewX(45deg); }
.parent > * { transform: skew(-45deg); }

通常情况下，如果您对父元素应用了多个变换，并且您希望子元素恢复正常，则必须按相反的顺序应用相同的变换（在大多数情况下，顺序确实很重要！），并使用减号来表示用于倾斜、旋转或平移的角度/长度值。在缩放的情况下，您需要一个缩放因子为1/scale_factor_for_parent。也就是说，在缩放方面，您需要这样做：

.parent { transform: scale(4); }
.parent > * { transform: scale(.25); /* 1/4 = .25 */ }

带有子元素的菱形很容易实现。

演示

结果：

HTML：

<div class='wrapper'>
  <div class='diamond'>
    <div class='child'>Yogi Bear</div>
    <div class='child'>Boo Boo</div>
  </div>
</div>

CSS：

.wrapper {
  overflow: hidden;
  margin: 0 auto;
  width: 10em; height: 10em;
}
.diamond {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 4em 1em 0;
  width: 86.6%; height: 100%;
  transform: translateY(-37.5%) rotate(30deg) skewY(30deg);
  background: lightblue;
}
.child {
  transform: skewY(-30deg) rotate(-30deg);
}

- Ana

Answer 2

任何transform属性都会影响应用于和所有子元素的元素。

因此，唯一将单个“父”元素skew的方法是使其没有子元素（即：它也不能是父元素！）。

- Alessandro Vendruscolo

Answer 3

您能否详细说明您想要得到什么结果？

像skew()这样的所有变换属性都会影响子元素。您可以尝试在同一位置使用两个HTML块，一个带有skew()，另一个带有内容。

此外，如果您只想要一个菱形，一个带有scale()和rotate()的矩形框就足够了，但是没有子元素。

如果您想将该菱形用作掩码，我相信更容易呈现不在菱形中的部分。呈现菱形外部的部分应该不难，毕竟它们只是矩形三角形。

- pistache

Answer 4

唯一实现这一点的方法是使用position:absolute;将子元素从文档流中取出，并在子元素上施加相等的负度数倾斜。

问题在于，现在您必须手动调整父元素的大小。

- Colin Worf