1

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

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

标题示例图片

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

有人有想法么？

4

2 回答 2

0

建议你试试border-width房产。这将解决您的问题。这是小提琴

的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-17T10:01:05.280 回答
0

这是一个 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;
}

最后，我分别选择了每个菜单项并添加到左侧值以正确定位它们：

导航 li:nth-of-type(2) { 左：2.5em; }

等等……</p>

理想情况下，菜单将保留在文档流中，因此您不必手动定位每个菜单项。这可能是可能的，但我已经没有时间研究它了。我相信你可以建立在它之上。

于 2013-05-17T09:52:39.450 回答