嵌套歪斜divs，我怎樣才能正確填充它們？

我無法用CSS和HTML創建想要的佈局。嵌套歪斜divs，我怎樣才能正確填充它們？

我想要的是一個標題偏斜的div，然後沿着x軸有一個直的背景。類似的事情下面的圖片：

heading sample images

到目前爲止，我的努力是徒勞的，你可以在這裏看到。我需要內部div來擴展到外部div的全部點。

任何人有任何想法？

來源

2013-05-06 Ant Swift

當你說「你可以在這裏看到」，這裏在哪裏？ – vals 2013-05-09 18:17:54

這是哈克的版本，你可以作爲一個起點使用：

http://jsfiddle.net/32C6E/1/

爲您所需要的菜單後面顯示的標題下的背景更復雜。因此，它需要菜單之後的白色條的另一個元素。我已將白色區域設置爲％寬度，但菜單並非如此，因此需要進行修正以確保它們不會重疊。

基本技巧是用skewX這個白色區域得到對角線，反向歪斜h1這樣文字就是直的。然後我添加一個負邊距來隱藏元素的左側。

header { 
    transform: skewX(-35deg); 
    margin-left: -5em 
} 

header h1 { 
    padding: 4em; 
    -webkit-transform: skewX(35deg); 
}

我絕對隨後位置的菜單項目，使他們在nav的左下角，並將其旋轉到正確的角度，在底部左側的起源。然後，我的位置擺弄直到第一個項目是在正確的位置：

nav li { 

    transform: rotate(-55deg); 
    transform-origin: bottom left; 

    position: absolute; 
    bottom: -2.6em; 
    left: 0em; 
}

最後我單獨選擇每個菜單項，並添加到左側值正確poisition他們：

NAV李：nth- （2）{ left：2.5em; }

等等......

理想情況下，菜單將保持在文檔的流量，使您不必手動定位每個菜單項。這可能是可能的，但我已經沒時間研究它了。我相信你可以建立它。

來源

2013-05-17 09:52:39

獲得答案，這讓我開始了。 – 2013-06-21 11:04:40

我建議你試試border-width屬性。這將解決您的問題。這裏是fiddle

的HTML：

<div class="abc">&nbsp;</div>

的CSS：

.abc { 
    width: 200px; 
    height: 0px; 
    border-color: lightgray transparent; 
    border-style: solid; 
    border-width: 350px 350px 0px 0px; 
    position:relative; 
    display:block; 
    margin-left:50px; 
}

希望這有助於。

來源

2013-05-17 10:01:05 Nitesh

嵌套歪斜divs，我怎樣才能正確填充它們？

回答

相關問題