Javascript CSS/HTML中的响应对角线

我想做的是让一条对角线从下边框延伸到上边框，在导航框后面，在对角线的每一侧有两种不同的背景色

最重要的是，它需要反应迅速

希望这是有意义的，如果没有，这是一张图片

在图像中，左下角的对角线太远，它将与左导航框元素对齐，因此可以使用每个角的位置作为锚

无论提出什么方法，我都非常乐意使用

谢谢

编辑我可以很容易地在css中创建平行四边形，但它没有响应性

#parallelogram {
    width: 700px;
    height: 200px;
    -webkit-transform: skew(-40deg);
    background: red;
    margin-left: 100px;
}

编辑2更新的小提琴，现在计算角度并在调整大小时应用更改。注意这只适用于Chrome（和Safari？）atm

---

虽然我们可能现在就离开，但我不确定这在我们当前项目的时间限制下是否可行

您可以使用css3转换，如下所示：

.border_div{
  width: 200px; // you may also need to apply position absolute
  height: 2px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

---

如果可能，可以发布

html

，

css

，

js

？我建议创建一个实心div（细长），然后使用css转换来旋转它。旋转多远需要一点数学和JS.Hi@DA。我已经玩了一段时间了，我想知道某种曲帕佐德形状是否可行。我的位置不对，谢谢。我可以添加对角线，但如果我使用旋转元素，并不是所有的背景都是彩色的。这也不能解决导航块位于顶部的问题。我希望你能提供尽可能多的细节。CSS不是我的强项。你需要使用绝对位置并将你的边框放置在导航之后。是的，但是如果你旋转一个矩形，它就会变成菱形。所以，我不会覆盖右边的背景。如果我使用类似的平行四边形，它可能会工作？背景分层div应该相对定位。然后与绝对位置完美配合。