Margin to apply to position div after skewing with

问题:

Possibly more math than CSS, but I'm trying to determine a method for adjusting the positioning of a div after a CSS skewY transform has been applied to it.

In the snippet below, the div with the blue border has a 3.5deg skewY applied, and I'd like to know if there is a mathematical way to know how much top to apply to the blue div so that the top right corner is always perfectly aligned to the top right corner of the div with the red border, regardless of the width of the two divs.

I have played around with numbers using % and vw, but I'm looking for a solid math-based solution.

.parent {
  border: 1px solid red;
  position: relative;
  margin-top: 100px;
  height: 200px;
}

.child {
  border: 1px solid blue;
  position: absolute;
  width: 100%;
  height: 100%;
  transform: skewY(-3.5deg);
}

<div class="parent">
  <div class="child">
    content
  </div>
</div>

回答1:

No need math, simply adjust transform-origin:

.parent {
  border: 1px solid red;
  position: relative;
  margin-top: 100px;
  height: 200px;
}

.child {
  border: 1px solid blue;
  position: absolute;
  width: 100%;
  height: 100%;
  transform: skewY(-3.5deg);
  transform-origin:top right;
}

<div class="parent">
  <div class="child">
    content
  </div>
</div>

But if you want to play with math the exact formula is :

top = tan(Xdeg)*(width/2)

green is the top, purple is half the width and yellow is the angle of skew

In this case we have -3.5deg so the tan(-3.5deg) = -0.061 so top = -0.061 * 50% of width BUT since the reference of the div is top left when applying top property we need to consider a minus sign because we want to adjust the top right corner and not the top left one

.parent {
  border: 1px solid red;
  position: relative;
  display:inline-block;
  height: 100px;
  width:var(--w); /*Used fixed width to make calculation easy*/
}

.child {
  border: 1px solid blue;
  position: absolute;
  width: 100%;
  height: 100%;
  transform: skewY(-3.5deg);
  top:calc(0.061 * (var(--w) / 2));
}

<div class="parent" style="--w:200px;">
  <div class="child">
    content
  </div>
</div>
<div class="parent" style="--w:100px;">
  <div class="child">
    content
  </div>
</div>