나는 그 같은 수평 메뉴를 필요로 구현하는 디자인을 주어졌다 :각도 CSS를 탭 메뉴
http://i.stack.imgur.com/jccZD.jpg
탭은 활성/호버 색상을해야하고 자바 스크립트가 괜찮습니다. ie8 +
일반적인 섹션> ul> li> HTML 구조에서 작동해야합니다.
나는 조금 둘러 보았고 어떤 예도 찾을 수 없습니다. 가능하거나 합리적인가요? 아니면 디자이너에게 드로잉 보드로 돌아가라고 지시해야합니까?
건배
Hashem이 권장하는대로 CSS Triangle을 사용할 수 있습니다. codepen을 게시했지만 해당 텍스트가 < li> 요소의 "경계"밖에 있음을 알았습니다. 과거에는 왼쪽/오른쪽의 패딩을 경계의 패딩과 동일하게 만들고 위쪽/아래쪽 패딩을 사용하지 않음으로써이를 극복했습니다. 이로 인해 텍스트가 < li>에 맞게 표시됩니다.
padding:0 50px 0 30px;
죄송합니다. 새로운 사용자이기 때문에 기존 스레드에 새로운 답변을 드릴 수 없습니다. 희망이 도움이!
예 - 둘러 보았습니다. 이걸로 잠시 동안 그리고 그것은 스케치 보인다. 탭 사이의 간격과 반대 각도가 필요합니다. – user1705111
[시도] (http://apps.eky.hk/css-triangle-generator/) [CSS] (http://css-tricks.com/snippets/css/css-triangle/) [ 삼각형] (http://css-tricks.com/examples/ShapesOfCSS/)? 아무것도? –
그래, 내가 가지고있는 모양을 얻을 수 있지만 어떻게 그 안에 텍스트를 얻을 수 있습니다. 내 이해는 테두리를 사용하여 모양을 만들고 텍스트가 요소에 남아 있어야한다는 것입니다. [link to codepen] (http://codepen.io/ronaldroe/pen/osLbm) – user1705111
잘못된 codepen 참조 - [여기] (http://codepen.io/anon/pen/Lgdpa) – user1705111