javascript - 扩展 div 以具有响应式边框

Question

我似乎无法让它正常工作。

我想扩展右侧 (.right-line) 和左侧 (.left-line) 的边框以达到屏幕的全边。我试过玩弄宽度和最大宽度。但不确定如何让它发挥作用。

http://codepen.io/Meds/pen/pbPdJp

<nav class="header">
<div class="nav-title">
    <div class="left-container">
        <div class="left-line">APPAREL</div>
    </div>
    <div class="second-line">

        <div class="nav-items logo"></div>

        <div class="bottom-three-group">
            <div class="skew-left">OVERTURE</div> 
            <div class="overture-title">OVERTURE APPAREL</div> 
            <div class="skew-right">APPAREL</div>
        </div>
    </div>
    <div class="right-line">OVERTURE</div>
    </div> 
</nav>

如有任何帮助，我们将不胜感激。

Answer 1

body {
  margin: 0;
}
.header {
  height: 99px;
  width: 100%;
  position: relative;
  background-color: white;
  overflow: hidden;
  padding-bottom: 10px;
  z-index: 1;
}

.overture-title {
  text-align: center;
  width: 123px;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  margin: 0 auto;
  font-size: 11px;
  padding-top: 1px;
  padding-bottom: 1px;
  display: inline-block;
  font-family: 'Roboto';
  background-color: white;
  transform: translateY(-4px);
}

.slant {
  transform: skew(-11deg);
}

.skew-left {
  width: 50px;
  border-top: 2px solid black;
  display: inline-block;
  border-bottom: 2px solid black;
  color: white;
  font-size: 11px;
  padding-top: 1px;
  padding-bottom: 1px;
  transform: skew(0, 18deg) translateY(-12px);
  font-family: 'Roboto';
  background-color: white;
}

.skew-right {
  width: 50px;
  border-top: 2px solid black;
  display: inline-block;
  border-bottom: 2px solid black;
  color: white;
  font-size: 11px;
  padding-top: 1px;
  padding-bottom: 1px;
  transform: skew(0, -18deg) translateY(-12px);
  font-family: 'Roboto';
  background-color: white;
}

.left-line {
  width: 9999px;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  color: white;
  font-size: 11px;
  padding-top: 1px;
  padding-bottom: 1px;
  color: white;
  font-family: 'Roboto';
  background-color: white;
  position: absolute;
  left: 100%;
  bottom: 20px;
}

.second-line {
  display: inline-block;
  position: relative;
  z-index: 3; /* The main logo */
}

.bottom-three-group {
  font-size: 0px;
  white-space: nowrap;
}

.right-line {
  width: 9999px;
  border-top: 2px solid black;
  position: absolute;
  border-bottom: 2px solid black;
  color: white;
  font-size: 11px;
  padding-top: 1px;
  padding-bottom: 1px;
  color: white;
  font-family: 'Roboto';
  background-color: white;
  right: 100%;
  bottom: 20px;
}

.nav-items {
  display: inline-block;
}

.nav-title {
  font-size: 0;
  text-align: center;
  width: 100%;
} 

.logo {
  height: 90px;
  width: 90px;
}

<nav class="header">
  <div class="nav-title">
    <div class="second-line">
      <div class="left-line">APPAREL</div>

      <div class="nav-items logo"></div>

      <div class="bottom-three-group">
        <div class="skew-left">OVERTURE</div> 
        <div class="overture-title">OVERTURE APPAREL</div> 
        <div class="skew-right">APPAREL</div>
      </div>
      <div class="right-line">OVERTURE</div>
    </div>
  </div> 
</nav>