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

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

解决方法

这真的很容易,你只需要为孩子们​​解开它. 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);
}

原文地址：https://www.jb51.cc/css/217384.html