如何仅在父元素中使用倾斜？

Question

有没有办法只在父元素中使用倾斜？ 我需要创建类似“钻石”的东西作为遮罩，并且子元素不会受到影响。在这种情况下，无法使用 png 作为遮罩。 预先感谢！

Answer 1

这真的很简单，你只需要把东西歪斜给孩子们就可以了。取消倾斜意味着应用另一个倾斜变换，但这次角度相反。

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

2024 编辑

现在要打造菱形形状，最好使用

clip-path

，例如：

$x: 10%;
$y: 15%;

.diamond {
    padding: 2em 3em;
    width: max-content;
    aspect-ratio: 2/ 3;
    background: skyblue;
    text-align: center;
    clip-path: 
        polygon(0 $y, $x 0, calc(100% - #{$x}) 0, 100% $y, 50% 100%)
}

现场演示

.diamond {
  padding: 2em 3em;
  width: max-content;
  aspect-ratio: 2/ 3;
  background: skyblue;
  text-align: center;
  clip-path: 
    polygon(0 15% /* left */, 10% 0 /* top left */, 
      calc(100% - 10%) 0 /* top right */, 100% 15% /* right */, 
      50% 100% /* bottom */);
}

<div class='diamond'>Yogi Bear<br>Boo Boo</div>

Answer 2

任何

transform

属性都会影响应用于 和 所有子元素的元素。

因此，

skew

单个“父”元素的唯一方法是让它没有子元素（即：它不能同时是父元素！）。

Answer 3

您可以尝试详细说明一下您想要得到什么结果吗？

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

另外，如果你只想要一个菱形，一个带有scale()和rotate()的矩形框应该就足够了，但同样没有子元素。

如果你想要那颗钻石作为掩模，我很确定渲染钻石中不存在的部分会更容易。渲染菱形的外部部分应该不难，毕竟它们只是矩形三角形。

Answer 4

实现此目的的唯一方法是使用

position:absolute;

将子元素从文档流中取出，并对子元素施加相等的负度倾斜。

这样做的问题是，您现在必须手动调整父级的大小。