Margin to apply to position div after skewing with CSS transform

Question

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

Answer 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;
}

  

    content
  

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

  

    content
  


  

    content