使用slope和javascript进行响应性web设计

以下是该网站的外观：

右下角的文本“即将到来”不应进入左侧的空白处。在任何时候，我都可以调整白色分割线的角度，这样它就不会与文本发生碰撞

下面是一个视口处于极限的示例，视口的高度为X，宽度为Y：

下面是视口处于极限的第二个示例，视口的高度为X2，宽度为Y2：

以下是白色分割的CSS：

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

我猜我可以得到两对视口维度，将其绘制成图形，线条的一侧可以，另一侧可以断开。我可以用Javascript动态地更改white divide的CSS属性……我只是不知道如何进行下一步

---

有人有什么想法吗D

假设您在0和1之间有一个特定的比率

r

，它描述了文本应该垂直放置的位置-0位于坡度底部，1位于顶部

如果AB是指的斜率，则AQ=r*AB

由于三角形ABE和AQC相似，因此：

AC=r*AE

和

CQ=r*EB

但因为我们知道EB（您的右边框大小）和AE（您的上边框大小）。我们可以找到点Q的坐标，如果需要，还可以找到点D的坐标

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

• r-比率
• Bt-顶部边框大小
• Br-右边框大小
• Sw-白色倾斜宽度
• Sh-白色倾斜高度

您要查找的坐标是：

• Qx=Sw+Br*r
• Qy=Bt*r
• QD=Br*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) */

下面是一个简单的例子：

您还可以使用较小的偏移值，如将1或2 vw/vh添加到

左侧

和

顶部

，然后从

宽度

中减去它，这样文本就不会附着在斜坡的右侧