Question

如您所见，色带的两侧不是从正确的位置开始。我希望它从标题的两侧开始并延伸到页面的边缘，而不管浏览器窗口的大小。我无法通过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元素中，这实际上可以解决问题，但是，您需要透明的背景，以便无效。

如何从标题的边缘开始制作此色带的两侧？

1 个答案: