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

Question

有没有办法只在父元素中使用偏斜？我需要创建一个类似"钻石"的东西作为面具,并且子元素不会受到影响.在这种情况下,没有办法使用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 */ }

带孩子的钻石形状非常容易.

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