css 倾斜元素并保持最大宽度

Question

如果我使用 skew 属性扭曲容器，则短角位于原始尺寸内部，长角位于原始尺寸外部。 这可以在图 1 中的蓝色方框中看到。

图1：

但是，我希望外角不要超过原始宽度，如图2中的红色框所示。

图2：

我基本上可以用 margin 来解决这个问题，但是突出的宽度取决于容器的长度。

有没有办法不超过原来的宽度？

我尝试使用边距，但由于盒子的高度未知，我无法计算边距

Answer 1

您可以尝试这样的方法，利用公式“a = b x tan(α)”来查找倾斜后的额外长度，并从 div 的总宽度中减去它。

如果您不熟悉这个来源可以更好地解释数学。

您可以调整代码片段中的宽度变量以查看其工作原理。

body {
  --height: 80px;
  --width: 120px;
  --skew: 20deg;
}

div {
  background-color: skyblue;
  width: var(--width);
  height: var(--height);
  display: flex;
  justify-content: center;
}

.skewed {
  transform: skew(var(--skew));
  background-color: pink;
  height: var(--height);
  
  /* container width - (height x tan(skew)) */
  width: calc(var(--width) - (var(--height) * tan(var(--skew))));
}

<div>
  <div class="skewed"></div>
</div>