CSS倾斜的矩形在容器外面

Question

我有一个红色的容器，我倾斜35度，其变换原点设置在左下角。下面的图片显示了这个突出显示其父容器的填充，红色框不能熄灭。

歪斜效果很好但没有响应，其中右上角溢出容器元素的周长。这是当前行为或红色矩形：

这就是我想要实现的行为。倾斜的盒子必须完全留在由容器填充物限定的周边内，如下所示：

想法？

这段代码重现了我的案例：

.container {
  padding: 20px;
  outline: 1px solid black;
  display: inline-block;
}

.red-box {
  background-color: red;
  color: white;
  padding: 10px;
  margin-bottom: 10px;
  
  transform: skew(-35deg);
  transform-origin: bottom left;
}

.red-box > div {
  padding: 0 10px;
  transform: skew(35deg);
}

<div class="container">
  <div class="red-box">
    <div>PARKS AND GARDENS IN LONDON</div>
  </div>
  <img src="https://www.vivilondra.it/images/vivilondra/images2/regents-park-top.jpg" />
</div>

Answer 1

感谢@neallred我找到了使用三角法规则的解决方案。

红色框应将其宽度设置为100％减去其高度乘以倾斜变换中使用的度数的正切值。所以：

width: 100% - height * tan(35)。

在我的片段中，我希望尽可能少地使用文字，因此我强制将红框的文字保留在一行中，这样我就可以获得1em + vertical_padding框的确切高度并重写上面的公式为100% - (1em + vertical_padding) * 0.700208，之前强制line-height: 1em。

.container {
  padding: 20px;
  outline: 1px solid black;
  display: inline-block;
}
.red-box {
  background-color: red;
  color: white;
  padding: 10px;
  margin-bottom: 10px;
  transform: skew(-35deg);
  transform-origin: bottom left;
  
  box-sizing: border-box;
  width: calc(100% - (1em + 20px) * 0.700208);
}
.red-box > div {
  padding: 0 10px;
  transform: skew(35deg);
  
  white-space: nowrap;
  text-overflow: ellipses;
  overflow: hidden;
  line-height: 1em;
}

<div class="container">
  <div class="red-box">
    <div>PARKS AND GARDENS IN LONDON</div>
  </div>
  <img src="https://www.vivilondra.it/images/vivilondra/images2/regents-park-top.jpg" />
</div>

我希望能帮到其他任何人。

Answer 2

您可以使用CSS 3 calc函数。计算顶边移位多少，然后从100％的宽度中减去。请参阅developer.mozilla.org/en-US/docs/Web/CSS/calc

你有没有弄清楚测量结果？这是一个三角学问题。我认为更高的一面是罪（55度）*原始红盒子（或h）的高度。这将是0.819 * h。较短的一侧是cos（55度）* h，或0.574 * h。你只需要知道较短（底部）的一面，因为你需要缩短新的盒子。如果h_final = 0.574 * h，那么它将是：

.red-box {
  .
  .
  .
  width: calc(100% - h_finalpx)
}