Css Skewed Rectangle Goes Outside Container

I have a red container I skewed of 35 degrees with its transform origin is set to the bottom left. The image below shows this highlighting the padding of its parent container that

Solution 1:

Thanks to @neallred I've found a solution using trigonometry rules.

The red box should set its width to its 100% minus its height multiplicated by the tangent of the degrees used in the skew transformation. So:

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

In my snippet I wanted to use fewer literals as possible so I forced the red box's text to stay in a single line and in this way I obtained the exact height of the box as 1em + vertical_padding and rewriting the above formula as 100% - (1em + vertical_padding) * 0.700208, forcing the line-height: 1em before.

.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: 010px;
  transform: skew(35deg);
  
  white-space: nowrap;
  text-overflow: ellipses;
  overflow: hidden;
  line-height: 1em;
}

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

I hope could be help anyone else.

Solution 2:

You could use the CSS 3 calc function. to calculate how much the top edge is shifted over, and then subtract that from a width of 100%. See developer.mozilla.org/en-US/docs/Web/CSS/calc

Did you figure out the measurements? It's a trigonometry problem. I think the taller side is sin(55degrees) * height of the original red box (or h). This would be 0.819 * h. The shorter side would be cos(55degrees) * h, or 0.574 * h. You only need to know about the shorter (bottom) side, because you need to shorten the new box by that much. If h_final = 0.574 * h, then it would be:

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