CSS / HTML中的响应对角线

Question

我想要达到的目的是让对角线从底部边框到顶部边框，在导航框后面，并在对角线的每一边都有两种不同的背景颜色。

而且，最重要的是，它需要响应。

希望这是有道理的，如果它没有，那就是一张图像。

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

非常乐意使用所提出的任何方法。

谢谢！

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

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

http://jsfiddle.net/cbiggins/fVeDD/

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

http://jsfiddle.net/cbiggins/fVeDD/5/

我们现在可能会离开它，但由于我们目前的项目存在时间限制，我现在还不确定这是多么可行。

Answer 1

您可以使用如下所示的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);
}