2

这是我得到的最接近的。

如您所见，功能区的两侧没有从正确的位置开始。无论浏览器窗口的大小如何，我都希望它从标题的两侧开始并延伸到页面的边缘。我无法通过 z-indexing 实现这一点，因为标题将具有透明背景。

<div id="header">
</div>

<div id="wrapper-menu">
    <div>
        <span>
            <div id="menu" class="sixteen columns">
              <ul id="nav">
                <li class="current first"><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li class="last"><a href="#">Contact Us</a></li>   
              </ul>
          </div>
        </span>
    </div>
</div>

#header {
    border: 1px solid black;
    width: 550px;
    height: 200px;
    margin: auto;
}

#wrapper-menu {
    display: table;
    margin: 0 0 -20px;
    position:relative;
    color: #ffffff;
    font: 20px 'Arial', sans-serif;
    text-align: center;
    width: 100%;
    z-index: -99;
}

#wrapper-menu:before, #wrapper-menu:after {
    content: "";
    width:25%;
    top:-.5em;
    position:absolute;
    display: table-cell;
    border: 1.2em solid #19816e;
    z-index:-99;
}

#wrapper-menu:before {
    left:-1.7em;
}

#wrapper-menu:after {
    right:-1.7em;
}

#wrapper-menu > div {
    margin: 0;
    display: table-cell;
    position: relative;
    width: 570px;
}

#wrapper-menu span {
    display: block;
    color: #ffffff;
    font: 20px 'Arial', sans-serif;
    text-align: center;
    background: #1d907a;
    margin: 0 -1em;
    padding: 0.4em 1em;
    position: relative;
    height: 30px;
}

#wrapper-menu span:before, #wrapper-menu span:after {
    content:"";
    position:absolute;
    display: block;
    border-style:solid;
    border-color: transparent transparent #125a4d transparent;
    z-index:-1;
    top: -10px;
}

#wrapper-menu span:before {
    left: 0;
    border-width: 0 0 0.5em 1.5em;
}

#wrapper-menu span:after {
    right: 0;
    border-width: 0 1.5em 0.5em 0;
}


/* Navigation */
#menu {
    position: relative;
    z-index: 400;
    margin-top: -8px;
}

ul#nav {
    margin: 0;
    padding: 0;
    width: auto;
}

ul#nav li {
    float: left;
    padding: 0;
    list-style: none;
    list-style-image: none;
}

ul#nav li.last { }
ul#nav li.first { }
ul#nav li a {
    font-family: Arial, sans-serif;
    font-size: 11px;
    text-decoration: none;
    line-height: 34px; 
    display: block;
    text-align: left;
    padding: 5px 20px 0;
    text-transform: uppercase;
    color: #FFF;
}

ul#nav li.current a,
ul#nav li a:hover {
    background: #5d5a5a;
}
4

1 回答 1

2

calc()您可以按如下方式使用 CSS3函数：

#wrapper-menu:before, #wrapper-menu:after {
    content: "";
    top:-.5em;
    position:absolute;
    display: block;
    border: 1.2em solid #19816e;
    z-index:-99;
}

#wrapper-menu:before {
    right: calc(50% + 275px);
    left: -1.7em;
}

#wrapper-menu:after {
    left: calc(50% + 275px);
    right:-1.7em;
}

参见演示：http: //jsfiddle.net/audetwebdesign/Xdba9/

您还可以根据需要使用一些 JavaScript/jQuery 来设置左右偏移。% 和 px 的混合单位使这有点棘手。

脚注

你可以很容易地添加background-color: white到你的#header元素中，这实际上掩盖了问题，但是，你需要一个透明的背景，这样就行不通了。

于 2013-09-26T20:20:21.387 回答