【问题标题】：How to use skew only in the parent element?如何仅在父元素中使用倾斜？
【发布时间】：2012-10-23 09:29:06
【问题描述】：

有没有办法只在父元素中使用倾斜？我需要创建类似“钻石”的东西作为掩码，并且子元素不会受到影响。在这种情况下，无法使用 png 作为掩码。提前致谢！

【问题讨论】：

【解决方案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 */ }

有孩子的钻石形状很容易。

DEMO

结果：

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

【讨论】：

【解决方案2】：

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

所以skew 单个“父”元素的唯一方法是让它没有子元素（即：它不能同时是父元素！）。

【讨论】：

【解决方案3】：

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

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

另外，如果你只想要一个钻石，一个带有 scale() 和 rotate() 的矩形框就足够了，但同样没有孩子。

如果您希望将该钻石用作蒙版，我敢肯定渲染钻石中不存在的部分会更容易。渲染钻石的外部应该不是那么难，毕竟它们只是矩形三角形。

【讨论】：

【解决方案4】：

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

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

【讨论】：