有没有办法只在父元素中使用偏斜？
我需要创建一个类似“钻石”的东西作为面具,并且子元素不会受到影响.在这种情况下,没有办法使用png作为掩码.
提前致谢！
我需要创建一个类似“钻石”的东西作为面具,并且子元素不会受到影响.在这种情况下,没有办法使用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 */ }
带孩子的钻石形状非常容易.
结果：
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);
}
