html - 我怎样才能让这条丝带的边从我的页眉边缘开始？

Question

This is the closest我得到了。

如您所见，色带的边没有从正确的位置开始。我希望它从页眉的两侧开始并延伸到页面的边缘，而不管浏览器窗口的大小。我无法使用 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;
}

Answer 1

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

#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 元素，这确实掩盖了问题，但是，您需要一个透明背景，因此那是行不通的。