javascript - 使用斜率和 javascript 进行响应式网页设计

Question

这是网站的样子:

右下角的文字“COMING SOON”不应进入左侧的空白区域。我可以随时调整白色分隔线的 Angular ，使其不会与文本发生冲突。

这是视口(viewport)处于其极限的一个示例，其中视口(viewport)的高度为 X，宽度为 Y:

这是视口(viewport)处于其极限的第二个示例，视口(viewport)的高度为 X2，宽度为 Y2:

这是白色分隔线的 CSS:

.white-slanted {
  z-index: -1;
  position: absolute;
  width: 80vw;
  height: 100vh;
  border-top: 100vh solid white;
  border-right: 60vw solid transparent;
}

我猜我可以取两对视口(viewport)尺寸，绘制它，线的一侧可以，而线的另一侧会断开。我可以使用 Javascript 动态更改白色分隔线的 CSS 属性...我只是不知道如何进行下一步的数学运算。

有人有什么想法吗？ :D

Answer 1

假设您有一个特定比例 r请记住 0 和 1 之间的值，它描述了文本应垂直放置的位置 - 0 位于斜坡底部，1 位于顶部。

如果 AB 是您所指的斜率而不是 AQ = r * AB .

因为三 Angular 形 ABE 和 AQC 相似，所以: AC = r * AE和 CQ = r * EB .

但是因为我们知道 EB(您的右边框尺寸)和 AE(您的上边框尺寸)。我们可以找到点Q的坐标。如果需要，还有点 D 的坐标。

现在我们可以找到 Q 和 D，我们拥有了计算所需值所需的一切。

• r - 比率。
• B_t - 上边框尺寸。
• B_r - 右边框大小。
• S_w - 白色倾斜宽度
• S_h - 白色倾斜高度

您要查找的坐标是:

• Q_x = S_w + B_r * r
• Q_y = B_t * r
• QD = B_r * r

在CSS方面这意味着给定:

• 比率 - 0.5(以中间为例)
• 顶部边框 - 100vh
• 右边框 - 60vw
• 宽度 - 80vw
• 高度 - 100vh

你的观点将是:

left: 110vw; /* 80vw + 60vw * 0.5; */
top: 50vh; /*100vh * (1 - 0.5) */
width: 30vh; /* 60vw * (1 - 0.5) */

这是一个简单的例子:https://jsfiddle.net/j0cfy440/

您还可以使用较小的偏移值，例如将 1 或 2 vw/vh 添加到 left和 top并从 width 中减去它所以文字不会直接贴在斜坡上。