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);
}