css - 在使用 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)

绿色是顶部，紫色是一半宽度，黄色是倾斜的 Angular

在这种情况下我们有 -3.5deg 所以 tan(-3.5deg) = -0.061 所以 top = -0.061 * 50% of width 但由于 div 的引用是左上角，因此在应用 top 属性时我们需要考虑减号，因为我们想要调整 右上角 而不是左上一个

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