расширение div, чтобы иметь отзывчивую границу

Question

Кажется, я не могу заставить это работать правильно.

Я хотел бы расширить границу справа (справа) и левую (.left-line) сторону, чтобы добраться до полной стороны экрана. Ive пытался играть с шириной и максимальной шириной. Но не уверен, как заставить его работать.

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>

Answer 2

Попробуйте добавить это изменение в свой код.

body{ 
margin:0; 
} 

.left-container { 
    width: 44%; 
} 

Answer 3

Вот способ ее решения с использованием flexbox,

http://codepen.io/anon/pen/YWVEkX

Я применил следующий класс к как левый и правый контейнеры,

.lines { 
    flex: 1 50%; 
    margin-top: 90px; 
} 

И включен гибким для .nav-title

.nav-title { 
    ... 
    display: flex; 
    flex-flow: row no-wrap; 
} 

Последнее, убрав запас тела помогает для достижения краев,

body { 
    margin: 0; 
} 

Answer 4

Попробуйте использовать, как это, я добавил новый HTML и использовал некоторые из ваших стилей. Пожалуйста, тщательно удалить, который укладка не требуется,

HTML,

<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> 
<div class="border-line"> 
<div class="cover-area">Cover Area</div> 
<div class="second-line white-background"> 
    <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> 

CSS,

.header { 
    height: 99px; 
    width: 100%; 
    position: relative; 
    background-color: white; 
    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: 100%; 
     border-top: 2px solid black; 
     /*display: inline-block;*/ 
     border-bottom: 2px solid black; 
     color: white; 
     font-size: 11px; 
     padding-top: 1px; 
     padding-bottom: 1px; 
     color: white; 
     font-family: 'Roboto'; 
     background-color: white; 
     transform: translateY(-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: 35%; 
    border-top: 2px solid black; 
    display: inline-block; 
    border-bottom: 2px solid black; 
    color: white; 
    font-size: 11px; 
    padding-top: 1px; 
    padding-bottom: 1px; 
    color: white; 
    font-family: 'Roboto'; 
    /*max-width: 100%;*/ 
    background-color: white; 
    transform: translateY(-20px); 
} 
    .nav-items { 
    display: inline-block; 
} 
.nav-title { 
    font-size: 0; 
    text-align: center; 
    width: 100%; 
} 
.logo { 
    height: 90px; 
    width: 90px; 
} 
.left-container { 
    width: 35%; 
    display: inline-block; 
    font-size: 11px; 
} 
.border-line{ 
    border-top: 2px solid #000; 
    border-bottom: 2px solid #000; 
    margin-top: 60px; 
    height: 14px; 
    position: relative; 
} 
    .white-background{ 
    margin: 0 auto; 
    width: 225px; 
    margin-top: 0px; 
    background-color: #fff; 
    z-index: 999999; 
    position: absolute; 
    top: 18px; 
    left: 0; 
    height: -14px; 
    right: 0; 
} 
.white-background .logo{ 
    height: auto; 
} 
.cover-area{ 
    width: 221px; 
    margin: 0 auto; 
    color: #fff; 
    background-color: #fff; 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: -2; 
} 

Answer 5

Вот решение с position: absolute для линий по бокам и с помощью margin-left и margin-right сделать пространство в центре для перекошенных линий и названия.

jsFiddle

HTML:

<div class="header"> 
    <div class="side-line left"></div> 
    <div class="side-line right"></div> 

    <div class="center-lines"> 
    <div class="skew-line left"></div> 
    <div class="center-title">OVERTURE APPAREL</div> 
    <div class="skew-line right"></div> 
    </div> 
</div> 

CSS:

.header { 
    position: relative; 
    overflow: hidden; 
    height: 50px; 
    width: 100%; 
} 

.side-line { 
    background-color: white; 
    border-bottom: 2px solid black; 
    border-top: 2px solid black; 
    height: 12px; 
    position: absolute; 
    width: 50%; 
} 

.side-line.left { 
    margin-right: 150px; 
    right: 50%; 
    top: 0; 
} 

.side-line.right { 
    left: 50%; 
    margin-left: 150px; 
    top: 0; 
} 

.center-lines { 
    font-size: 0; 
    margin: 0 auto; 
    width: 300px; 
} 

.skew-line { 
    background-color: white; 
    border-bottom: 2px solid black; 
    border-top: 2px solid black; 
    display: inline-block; 
    height: 12px; 
    width: 50px; 
} 

.skew-line.left { 
    transform: skew(0, 18deg) translateY(8px); 
} 

.skew-line.right { 
    transform: skew(0, -18deg) translateY(8px); 
} 

.center-title { 
    background-color: white; 
    border-bottom: 2px solid black; 
    border-top: 2px solid black; 
    display: inline-block; 
    font-size: 11px; 
    height: 12px; 
    text-align: center; 
    transform: translateY(12px); 
    width: 200px; 
}