CSS (3) & HTML 자르기 가장자리

Question

이것은 이미 묻지 만 다른 방법으로 사용해야합니다.

문제 : 다음 탐색 내가 실현하려고 줄 볼 수 아래 이미지를 살펴 제발

텍스트/이미지 막대 내부의 가장자리

이

• 그림자
• 그림 주위의 1 픽셀 단색 경계선이 좋음

물론 tatic 이미지가 이것을 할 수는 있지만 다른 것을 사용하고 싶습니다. 가능한 한 많은 브라우저 지원을 통해 아이디어를 얻으시겠습니까?

편집 : <nav>은 절대

여기

위치입니다 내가 지금까지

무슨 짓을하지만 테두리를 적용 할 수 없습니다와 고정 크기도 문제가있다.

nav { 
     float: left; 
     position: absolute; 
     background-color: #ffffff; 
     top: 0; 
     left: 0; 
     display: inline; 
     padding: 12px; 
     padding-right: 0; 
     width: auto; 
    } 

    .behind_nav { 
     height: 60px; 
     width: 523px; 
     position: absolute; 
     top: 0; 
     left: 0; 
     border-right: 20px solid transparent; 
     border-top: 48px solid white; 
    } 

.behind_nav는 <nav> (놀랍게도) 뒤에있다. 실제로 이것은 위에서 언급 한 그림자 및 경계 문제를 제외하고는 잘 작동합니다. 또한 문제가되는 고정 값에 바인딩됩니다. <nav> 내용에 너비가 맞습니다 (CMS 데이터/브라우저로 인해 다를 수 있음)

Answer 1

거친 데모 : http://jsfiddle.net/W82UV/3/

내가 생각 이 그림자와 국경을 드롭, 즉 가장자리 왜곡하여 문제의 핵심을 다루고 있습니다.

<div id="top"> 
    The top bar 
</div> 
<div id="container"> 
    <div id="background">   
    </div> 
    <nav> 
     Test 
    </nav> 
</div> 

#top{ 
    background-color: #f0f0f0; 
    border-bottom: 1px solid #555; 
    box-shadow: 8px 8px 8px #aaa; 
} 

#container { 
    position: relative; 
    top: -1px; 
    overflow: hidden; 
    height: 96px; 
} 

#background { 
    background-color: #f0f0f0; 

    position: absolute; 
    top: -1px; 
    left: -32px; 
    border: 1px solid #555; 

    width: 400px; 
    height: 64px; 
    box-shadow: 8px 8px 8px #aaa; 

    -webkit-transform: skew(-20deg); 
    -moz-transform: skew(-20deg); 
    -o-transform: skew(-20deg); 
    -ms-transform: skew(-20deg); 
    transform: skew(-20deg); 
} 

Internet Explorer 8 (비뚤어 짐 없음), 9,10, FF 및 Chrome에서 테스트되었습니다. 마크 업을 좀 더 깔끔하게 정리하여 최종 솔루션 (클래스 이름 및/또는 ID)을 개선하고 모든 것을 비례 적으로 배치 할 수 있습니다.

Answer 2

가장자리를위한 정적 이미지가 유일한 방법 일 것입니다. (기술을 얻고 캔버스를 사용하고 싶지 만 어리석은 경우는 제외). 회전 된 블록을 사용하여 각진 에지를 얻을 수 있지만 그림자와 관련된 문제가 발생합니다. 막대 내부의 텍스트는 문제가되지 않는 것처럼 보입니다. 참조 용으로, 해당 탐색 막대는 일반적으로 평면 목록으로 구현됩니다.

죄송합니다. 도움이 될 수 없습니다.