javascript - CSS/HTML 中的响应式对 Angular 线

Question

我想要实现的是让一条对 Angular 线从底部边框延伸到顶部边框，在导航框后面，并且在对 Angular 线的每一侧都有两种不同的背景颜色。

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

希望这是有道理的，如果没有，这是一张图片。

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

非常乐意使用建议的任何方法。

谢谢!

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

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

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

EDIT 2 更新了 fiddle ，现在计算 Angular 并在调整大小时应用更改。请注意，这仅适用于 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);
}