在CSS/HTML中的響應對角線

我想要實現的是有一條對角線從導航框後面的底部邊框到頂部邊框，並在對角線的每一側有兩個不同的背景顏色。在CSS/HTML中的響應對角線

而最重要的是，它需要有響應。

希望這是有道理的，如果沒有的話，繼承人的圖像。

在圖像中，左下角對角線出現得太遠了，它會與左導航框元素一致，所以可以使用每個角的位置作爲錨點。

enter image description here

樂意使用提出任何方法更多。

謝謝！

編輯我可以在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/

我們可能會離開現在它雖然，我不知道這是怎麼了可行的現在，我們已經在我們目前的項目的時間限制。

來源

2014-04-08 Christian

如果可能的話，可以張貼'html'，'css'，'js'？ – guest271314

我建議做一個堅實的div（瘦和長），然後使用CSS轉換來旋轉它。旋轉多遠需要一點數學和JS。 –

嗨@ DA.I玩過那麼一點點，我想知道是否某種類型的trapazoid會起作用。這是我沒有得到正確的定位。 – Christian

您可以使用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); 
}

來源

2014-04-08 02:58:58

謝謝。我可以添加對角線，但如果我使用旋轉元素，並非所有的背景都是彩色的。這也沒有解決導航塊位於頂部。會盡可能多的細節，你可以給。 CSS不是我的特長。 – Christian

你需要使用絕對位置，並在nav之後放置你的border_div。 –

啊是的，但如果你旋轉一個矩形，它就變成了一顆鑽石。所以，不會覆蓋右邊的背景。如果我要使用某種平行四邊形，它可能會起作用嗎？ – Christian

在CSS/HTML中的響應對角線

回答

相關問題