嵌套的倾斜div，我该如何正确填充它们？

Question

我无法使用CSS和HTML创建所需的布局。

我想要的是一个标题倾斜的div然后沿x轴有一个直的背景。与下图类似的东西：

到目前为止，我的尝试都是徒劳的，你可以在这里看到。我需要内部div扩展到外部div的整个宽度。

有人有什么想法吗？

Answer 1

这是一个hacky版本，您可以将其作为起点：

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

最后，我单独选择了每个菜单项并添加到左侧值以正确地对它们进行分类：

nav li：nth-​​of-type（2）{       左：2.5em;    }

等等......

理想情况下，菜单会保留在文档流中，因此您无需手动定位每个菜单项。这可能是可能的，但我没有时间去研究它。我相信你可以在此基础上继续发展。

Answer 2

我建议您尝试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;
}

希望这有帮助。