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

时间:2012-10-23 09:29:06

标签: css css3 css-shapes skew

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

4 个答案:

答案 0 :(得分:12)

这很简单,你只需要为孩子们​​解开它。 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

<强>结果

result

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

答案 1 :(得分:1)

任何transform属性都会影响应用于所有孩子的元素。

因此skew单个“父”元素的唯一方法就是让它没有子元素(即:它也不能是父元素!)。

答案 2 :(得分:1)

你可以尝试详细说明你想得到什么结果吗?

skew(),与所有变换属性一样,总是会影响子元素。您可以尝试在同一位置使用两个HTML块,一个使用skew(),另一个使用内容。

另外,如果你只想要一个钻石,一个带有scale()和rotate()的矩形框就足够了,但是再没有孩子。

如果您想将该钻石作为面具,我很确定渲染钻石中不存在的部分会更容易。渲染钻石的外部部分应该不那么难,毕竟它们只是矩形三角形。

答案 3 :(得分:0)

实现这一目标的唯一方法是使用position:absolute;将子元素从文档流中取出,并对子项施加相等的负度偏差。

问题在于您现在必须手动调整父级的大小。