재미있는 CSS 모양 탐색 (셰브론)

Question

나는 지금 사이트에 대해 상당히 흥미로운 모양의 네비게이션을 만들고 있습니다. 각 메뉴 항목이 있어야 모양은 아래에 설명되어있다 : 나는 흥미로운 실험이 될 것이라고 생각

:

마지막 탐색이의 확장 버전과 같이 표시됩니다 CSS에서 이러한 모양을 수행합니다. 화살표 모양의 하나의 CSS와 HTML은 여기에 있습니다 :

.arrowEndOn { 
     font-size: 10px; line-height: 0%; width: 0px; 
     border-top: 11px solid #FFFFFF; 
     border-bottom: 11px solid #FFFFFF; 
     border-left: 5px solid transparent; 
     border-right: 5px solid #FFFFFF;  
     float: left; 
     cursor: pointer; 
    } 

    .arrowBulkOn { 
     height: 20px; 
     background: #FFFFFF; 
     padding: 2px 5px 0px 0px; 
     float: left; 
     color: #000000; 
     line-height: 14pt; 
     cursor: pointer; 
    } 

    .arrowStartOn { 
     font-size: 0px; line-height: 0%; width: 0px; 
     border-top: 11px solid transparent; 
     border-bottom: 11px solid transparent; 
     border-left: 5px solid #FFFFFF; 
     border-right: 0px solid transparent;   
     float: left; 
     cursor: pointer; 
    } 

    <div id="nav" class="navArrow" style="position: relative;"> 
     <div class="arrowEndOn" id="nav">&nbsp;</div> 
     <div class="arrowBulkOn" id="nav">NAV</div> 
     <div class="arrowStartOn" id="nav">&nbsp;</div> 
    </div> 

각 탐색 항목이 그들에게 모든 플러시를 얻기 위해 렌더링 된 것 같이 (I 데모에서 제외했습니다)에 적용된 오프셋 부정적인있다 서로.

저는 자바 스크립트로 롤오버와 주를 처리하고 있습니다.

내 문제는 페이지 너비에 걸쳐 늘리는 것입니다. 지금은 모든 것을 수용하기 위해 훨씬 더 넓은 너비로 nav 컨테이너를 설정해야합니다.

오버플로를 숨김으로 설정해 보았습니다.하지만 마지막 항목은 계속해서 이어지는 것보다는 레벨이 내려가는 것입니다.

내가 여기까지 예를 들어 설정 한 - http://jsfiddle.net/spacebeers/S7hzu/1/

빨간색 테두리 overflow: hidden;을 가지고 있으며, 블루하지 않는]을

내 질문은 다음과 같습니다.가 어떻게 모든 float로 상자를 얻을 수 있습니다 레벨을 떨어 뜨리지 않고 포함 된 div의 너비를 채우는 한 줄에.

감사

Answer 1

각 화살표에 부정적인 마진을 추가

.navArrow { 
    float: left; 
    margin-left: -8px; 
} 

데모 : http://jsfiddle.net/S7hzu/2/

Answer 2

인 flexbox

이 예제를 사용할 수 있습니다

https://codepen.io/WBear/pen/pPYrwo

새로운 브라우저에서 작동하여 이전 브라우저를 지원합니다.

HTML :

<div class="content"> 
<div class="as1"> 
    <a href="#">NAV</a> 
    </div> 
<div class="as2"> 
    <a href="#">NAV</a> 
    </div> 
    <div class="as3"> 
    <a href="#">NAV</a> 
    </div> 
    </div> 

CSS :

.content { 
    margin-top: 10px; 
    width: 100%; 
    display: inline-flex; 

} 

.as1, .as2, .as3 { 
    height: 70px; 
    min-width: 8%; 
    max-width: 100%; 
    background-color: black; 
    position: relative; 
    display: inline-flex; 
    text-align: center; 
    flex-wrap: wrap; 
    flex-grow: 1; 

} 

.as1 a, .as2 a, .as3 a { 
    text-decoration: none; 
    display: inline-flex; 
    color: white; 
    margin: auto; 
    font-size: 14pt; 

} 

.as1:after { 
    content: ""; 
    position: absolute; 
    right: 4px; 
    border-top: 35px solid transparent; 
    border-left: 25px solid black; 
    border-bottom: 35px solid transparent; 
    z-index: 2; 

} 

.as2 { 
    background-color: grey; 
    margin-left: -29px; 


} 
.as2:after { 
    content: ""; 
    position: absolute; 
    right: 4px; 
    border-top: 35px solid transparent; 
    border-left: 25px solid grey; 
    border-bottom: 35px solid transparent; 
    z-index: 3; 

} 

.as3 { 
    background-color: #A9A9A9; 
    margin-left: -29px; 
}