有没有办法只在父元素中使用偏斜？
我需要创建一个类似“钻石”的东西作为面具,并且子元素不会受到影响.在这种情况下,没有办法使用png作为掩码.
提前致谢！
我需要创建一个类似“钻石”的东西作为面具,并且子元素不会受到影响.在这种情况下,没有办法使用png作为掩码.
提前致谢！
@R_502_323@
这真的很容易,你只需要为孩子们解开它. 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);
- }
