Javascript CSS倾斜-获取偏移/上限距离

我需要一些帮助。我有一个长方形（红色）。这个矩形有

transform: skew(0deg, -6deg);

我现在需要的是红色上方区域的高度。请看图片：

我相信这是简单的数学。但我在谷歌上找不到soloution

多谢各位^^

---

编辑：

要从数学上获得该高度，只需使用tan函数：

tan(θ) = Opposite / Adjacent

取斜角的棕褐色（在本例中为6deg），将其与相邻的（在本例中为长方体的一半）相乘，得到相反的结果。 因此：

供进一步查阅

如果您使用较少的或SCS（带指南针），您实际上可以在不使用js的情况下获得：

带指南针的SCSS：

$width: 652px;
$angle: 6deg;

$skewheight: tan($angle)*$width/2;

下面是代码笔示例中的JS版本：

---

要从数学上获得该高度，只需使用tan函数：

tan(θ) = Opposite / Adjacent

取斜角的棕褐色（在本例中为6deg），将其与相邻的（在本例中为长方体的一半）相乘，得到相反的结果。 因此：

供进一步查阅

如果您使用较少的或SCS（带指南针），您实际上可以在不使用js的情况下获得：

带指南针的SCSS：

$width: 652px;
$angle: 6deg;

$skewheight: tan($angle)*$width/2;

下面是代码笔示例中的JS版本：

---

如果您的目标是用“未倾斜”内容填补右上角的红色空白，则应使用以下选项将内容的右上角设置为：

transform-origin: 100% 0;

而不是使用绝对定位和负的顶部值：

#容器{
变换：歪斜（-6度）；
高度：250px；
背景色：红色；
溢出：隐藏；
}
#img容器{
变换原点：100%0；
变换：歪斜（6度）；
}
#集装箱{
宽度：100%；
高度：自动；
显示：块；
}

---

如果您的目标是用“未倾斜”内容填补右上角的红色空白，则应使用以下选项将内容的右上角设置为：

transform-origin: 100% 0;

而不是使用绝对定位和负的顶部值：

#容器{
变换：歪斜（-6度）；
高度：250px；
背景色：红色；
溢出：隐藏；
}
#img容器{
变换原点：100%0；
变换：歪斜（6度）；
}
#集装箱{
宽度：100%；
高度：自动；
显示：块；
}

u正确地需要上面的图像？？您想要这个高度（在一个变量中）并将其用于某些事情，或者只想知道高度是多少？@rvervourt在div中，使用转换“里面是一个img。我需要top的值。如果使用top 0，则顶部有一个间隙。请解释一下您正在寻找的最终结果。另外，您应该使用

skewX（0）skewY（-6deg）

@webtiki看看这个：在这里，您可以看到图像的绝对顶部为：0，但顶部仍然有一个间隙。我需要负偏移量。你正好需要上面的图像吗？你想要这个高度（在一个变量中）并用它做些什么，或者只是想知道它的高度是多少？@rvervourt在div中，使用变换“里面是一个img。我需要top的值。如果使用top 0，则顶部有一个间隙。请解释一下您正在寻找的最终结果。另外，您应该使用

skewX（0）skewY（-6deg）

@webtiki看看这个：在这里，您可以看到图像的绝对顶部为：0，但顶部仍然有一个间隙。我需要负偏移量。