使用CSS变换进行倾斜后应用于位置div的边距

Question

可能比CSS更多的数学,但我正在尝试确定一种在应用CSS skewY变换后调整div定位的方法.

在下面的代码片段中,带有蓝色边框的div应用了3.5deg skewY,我想知道是否有一种数学方法可以知道top应用于蓝色div的数量,以便右上角始终完美无论两个div的宽度如何,都使用红色边框与div的右上角对齐.

我使用%和玩过数字vw,但我正在寻找一个可靠的基于数学的解决方案.

.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>

Answer 1

无需数学,只需调整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>

但如果你想玩数学,确切的公式是:

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

绿色是top紫色half the width,黄色是the angle偏斜

在这种情况下,我们有-3.5deg这样的tan(-3.5deg) = -0.061如此top = -0.061 * 50% of width但是由于div的参考top left,我们需要考虑一个减号应用时,顶级物业,因为我们要调整的top right角落,而不是top left一个

.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>