CSS 倾斜 - 获取 Offset/Upper 距离

Question

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

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

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

我确信这是简单的数学运算。但我在 google...

上找不到解决方案

谢谢^^

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

Answer 1

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

tan(θ) = Opposite / Adjacent

你把你的斜角（在这个例子中是 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

Answer 2

如果您的目标是用 "unskewed" 内容填充右上角的红色空白，您应该将内容的 transform origin 设置为右上角：

transform-origin: 100% 0;

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

#container {
  transform: skewY(-6deg);
  height: 250px;
  background-color: red;
  overflow: hidden;
}
#img-container {
  transform-origin: 100% 0;
  transform: skewY(6deg);
}
#img-container img {
  width: 100%;
  height: auto;
  display: block;
}

<div id="container">
  <div id="img-container">
    <img src="http://lorempixel.com/output/people-q-c-640-480-9.jpg" />
  </div>
</div>

CSS 倾斜 - 获取 Offset/Upper 距离

CSS Skew - Get the Offset/Upper Distance

javascript

css

math

jquery