Css 如何仅在父元素中使用“扭曲”？

有没有办法只在父元素中使用skew？ 我需要创建一个类似“钻石”的东西作为面具，子元素不会受到影响。在这种情况下，无法使用png作为遮罩。

---

提前谢谢

任何

transform

属性都会影响应用于及其所有子项的元素

---

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

您能否尝试详细说明一下您希望得到的结果

与所有变换属性一样，skew（）始终影响子元素。您可以尝试在同一位置使用两个HTML块，一个包含skew（），另一个包含内容

另外，如果您只想要一个菱形，一个带有scale（）和rotate（）的矩形框就足够了，但同样没有子对象

---

如果你想要那颗钻石作为一个遮罩，我敢肯定渲染钻石中不存在的部分会更容易。渲染钻石的外部部分不应该那么难，毕竟它们只是矩形三角形。

这很容易，你只需要为孩子们解开这个东西。Unskew表示应用另一个倾斜变换，但这次角度相反

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

通常，如果在父元素上应用了许多变换，并且希望子元素恢复正常，则必须应用相同的变换，仅以相反的顺序（在大多数情况下顺序很重要！）应用相同的变换，并且在用于倾斜、旋转或平移的角度/长度值中使用负号。在缩放的情况下，您需要一个

1/scale\u factor\u的缩放因子来表示\u parent

。也就是说，对于scale，您可以这样做：

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

有孩子的菱形很容易

结果：

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

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

HTML：

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

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

---

实现这一点的唯一方法是使用

position:absolute将子元素从文档流中取出并在子对象上设置相等的负度倾斜

这样做的问题是，您现在必须手动调整父对象的大小