각진 측면 테두리가있는 수평 탐색 - "활성"상태를 처리하는 방법?

Question

저는 약간의 브레인 스토밍 지원을 찾고 있습니다.

디자이너가 함께 배치 한 레이아웃을 코딩하고 있습니다. 링크를 선택하면 가장자리가 비스듬히 들어가고 파란색 배경에서 흰색 배경으로가는 가로 방향 탐색을 처리하는 방법을 생각하려고합니다. .

사실 저는 스크린 샷을 포함시킵니다. 이것은 실제로 탭이있는 컨텐츠 영역에 대한 탐색입니다. 스크린 샷의 상단 부분은 첫 번째 탭을 선택했을 때의 모습을 보여줍니다. 스크린 샷의 아래쪽 절반에는 두 번째 탭이 선택되어 있습니다.

http://i.stack.imgur.com/P34yI.gif

그래서 내 문제는 HTML 요소는 사각형, 각진 모서리가없는 사각형 있다는 사실에서 비롯됩니다. 각각의 링크가 흰색으로 바뀔 수 있고 BG 이미지가 앵글의 환영을주기 위해 다음 링크가 약간 삽입되어 있음을 깨달을 때까지 나는 CSS 배경의 그림자가있는 각진 가장자리를 저장했습니다. 따라서 가장 왼쪽의 링크는 다른 배경과 중간 링크, 오른쪽 링크 등이 필요합니다.

고유 한 클래스/id (또는 n 번째 자식 사용)를 각 링크에 할당 할 수는 있지만 솔루션을 유연하게 유지하여 향후 다른 링크/탭을 추가 할 수 있습니다.

CSS3/HTML5/또는 투명 PNG와 음수 여백 또는 상대 위치 지정을 사용하여이 모양을 만드는 방법에 대한 아이디어가 있다면 궁금합니다.

나는 코드를 요구하거나 내 일을하기를 요구하지 않고있다. 나는 단지 아이디어를 찾고있다. 단지 커뮤니티 브레인 스토밍을하고있다. 누구든지 내게 알려주는 제안이 있다면 그것은 해결책이 될 수도 있습니다.

감사합니다.

Answer 1

메뉴에 'ul> li> a'구조를 사용한다고 가정 할 때 두 개의 각진 배경 (오른쪽과 왼쪽 ... 오른쪽은 그림자가있는 약 27px, 왼쪽은 약 22px)을 사용합니다. . 왼쪽 구석을 <li>에 적용하고 오른쪽 구석을 <a>에 적용합니다. 이렇게하면 각 목록 항목의 배경이 두 배로되므로 형제가 겹치도록 당기기 위해 <li>의 양쪽에 음수 여백을 사용해야합니다. 그런 다음 z-index를 사용하여 커서를 가져 가거나 메뉴 항목이 다른 메뉴 상단에 표시되는지 확인하십시오. 나는 텍스트 주위에 여분의 공간을 만들기 위해 양쪽에 패딩 추가로 30 픽셀을 추가했습니다 :

li { 
    margin-right: -27px; 
    margin-left: -22px; 
    padding-left: 52px; 
    position: relative; 
    background: url(leftcorner.jpg) left top no-repeat; 
    background-color: #3aa1cc 
} 

li a { 
    padding-right: 57px; 
    background: url(rightcorner.jpg) right top 
} 

li:hover {z-index: 5; background: url(leftcorner-hover.jpg) left top no-repeat} 
li:hover a {background: url(rightcorner-hover.jpg) left top no-repeat} 

나는이 테스트를하지 않은하지만 난 그게 아마도 몇 가지 추가 조정이와 함께 ... 일을한다고 생각합니다.

이 솔루션에는 미묘한 내부 그림자가 포함되어 있지 않습니다. <li>에서 1 픽셀 반복 그라데이션 배경을 사용해야하는 경우 두 모서리 배경 이미지의 before 및 : after 의사 요소를 사용하십시오.

또한 내 코드에서 별개의 .jpg (일반 및 마우스 오버)를 두었지만 실제로 스프라이트와 배경 위치를 사용하여 마우스 오버 상태 이미지가로드되는 동안 플래시가 없어야합니다.