嵌套歪斜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，我怎样才能正确填充它们？

回答

相关问题