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

Question

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

在下面的代码段中，带有蓝色边框的div应用了3.5deg skewY，我想知道是否有数学方法可以知道应用于蓝色div的top多少无论两个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：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但如果你想玩数学，确切的公式是：

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一角

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;