javascript - CSS Skew - 获取偏移量/上距离

Question

我需要一些帮助。我有矩形(红色)。这个矩形有

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

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

我确信这是简单的数学运算。但我在谷歌上找不到解决方案...

谢谢^^

编辑:http://codepen.io/anon/pen/raROPy

Answer 1

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

tan(θ) = Opposite / Adjacent

您将斜 Angular 的棕褐色(在本例中为 6 度)乘以相邻值(在本例中为框的一半)，得到相反值。所以:

height = tan(6) * boxwidth/2

进一步引用检查mathisfun

如果你使用 less 或 scss(带指南针)，你实际上可以在没有 js 的情况下获得它:

带指南针的 SCSS:

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

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

这是您的 Codepen 示例中的 JS 版本: http://codepen.io/MrBambule/pen/vEPVZG