html - 如何使此功能区的侧面从标题的边缘开始？

我得到了。
This is the closest
如你所见，缎带的边不是从正确的位置开始的。我希望它从页眉的侧面开始，延伸到页面的边缘，而不管浏览器窗口的大小。我不能用Z索引实现这一点，因为标题将有一个透明的背景。

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

最佳答案

您可以使用CSS3calc()函数，如下所示：

#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元素中，这实际上掩盖了问题，但是，您需要一个透明的背景，这样就不起作用了。

关于html - 如何使此功能区的侧面从标题的边缘开始？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19037645/