如何仅在父元素中使用skew？

Question

有没有办法只在父元素中使用skew？我需要创建一个类似‘钻石’的东西作为遮罩，并且子元素不会受到影响。在这种情况下，没有办法使用png作为掩码。提前感谢！

Answer 1

这真的很简单，你只需要为孩子们把事情弄清楚就行了。Unskew意味着应用另一个倾斜变换，但这次的角度相反。

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

Answer 2

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

因此，skew单个“父”元素的唯一方法是让它不带子元素(即:它不能同时是父元素！)。

Answer 3

你能试着详细说明一下你想要得到什么结果吗？

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

另外，如果你只想要一个菱形，一个带有scale()和rotate()的矩形长方体应该就足够了，但同样不需要子元素。

如果你想要这个钻石作为一个掩码，我非常确定它会更容易渲染钻石中不存在的部分。渲染钻石的外部部分不应该那么困难，毕竟它们只是矩形三角形。