2013-03-04 2 views
5

이것은 이미 묻지 만 다른 방법으로 사용해야합니다.CSS (3) & HTML 자르기 가장자리

navigation

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

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

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

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

    편집 : <nav>은 절대

    여기

    위치입니다 내가 지금까지

    navbar progress

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

    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 데이터/브라우저로 인해 다를 수 있음)

  • +0

    기존 답변은 이미 매우 훌륭하며 질문이 제기 된 이후로 꽤 오래되었습니다.하지만 [이 답변] (http://stackoverflow.com/questions/15724678/creating-an)을 참조하십시오. - 이꼴 - 사다리꼴 모양) 다른 접근법 (이 질문에 맞게 조정해야 함). – Harry

    답변

    8

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

    enter image description here

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

    <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)을 개선하고 모든 것을 비례 적으로 배치 할 수 있습니다.

    +0

    이것은 실제로 좋은 솔루션이며, 이미이 테스트를 통해 CSS3보다 더 많은 지원을받는 솔루션을 찾고 싶었습니다. 어쨌든 우리가 다른 것을 찾지 못하면 해결책으로 표시 할 것입니다. – bluewhile

    +0

    오 ... 왜곡을 사용하는 것을 잊었습니다! 꽤 교활 해요. Bluewhile, 나는 당신이 CSS3 또는 정적 이미지가 아닌 다른 것을 얻을 것이라고 생각하지 않습니다. 어쨌든 행운을 빈다. – Orteil

    +0

    글쎄, 나는 다른 방법이 없을 거라고 생각한다. – bluewhile

    1

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

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

    +0

    내가 할 수있는 것은 가장자리가 별도의 이미지 (테두리와 그림자 포함)로되어 있지만 가능한 경우 다른 것을 시도하고 싶습니다. – bluewhile

    +0

    이미지를 Boooo!;) –

    +0

    그건 이전 버전과의 호환성의 가격이야 ... 당신은 박탈 된 아이들에게 시원한 새로운 장난감을 과시 할 수는 없습니다. – Orteil