왜곡 탐색을 수행하는 다른 방법이 있습니까?

Question

벨로우즈가 내 탐색이며, 유형이 비뚤어집니다. 그래서 메뉴가 활성화 될 때 빨간 색과 상단 바 파란색 영역도 붉은 색으로 표시됩니다. 아래쪽 화살표는 활성 모양의 버튼 하나를 보여줍니다.

저는 스프라이트 이미지로 그렇게 할 수 있습니다. 다른 방법은 CSS skew -webkit-transform: skew(16deg, 0);입니다. 또 다른 방법은 캔버스지만 캔버스 비트는 복잡하다고 생각합니다.

다른 유형의 탐색을 기울이는 것이 가장 좋습니다.

Answer 1

봅니다이 사용하는 :

HTML

<nav role='navigation'> 
    <ul> 
     <li><a href="#"><span>Home</span></a></li> 
     <li class="current"><a href="#"><span>About</span></a></li> 
     <li><a href="#"><span>Clients</span></a></li> 
     <li><a href="#"><span>Contact Us</span></a></li> 
    </ul> 
    </nav> 

CSS

ul { 
    width: 50%; 
} 

li { 
    display: inline-block; 
    margin-right: -4px; 
    width: 25%; 
} 
li a { 
    position: relative; 
    border: 1px solid #919196; 
    background-color: #00465a; 
    box-sizing: border-box; 
    padding: 1em; 
    display: block; 
    -moz-transform: skewX(-45deg); 
    -ms-transform: skewX(-45deg); 
    -webkit-transform: skewX(-45deg); 
    transform: skewX(-45deg); 
    width: 100%; 
    min-height: 3em; 
    text-align: center; 
} 
li a span { 
    color: white; 
    position: absolute; 
    box-sizing: border-box; 
    -moz-transform: skewX(45deg); 
    -ms-transform: skewX(45deg); 
    -webkit-transform: skewX(45deg); 
    transform: skewX(45deg); 
    left: 0; 
    width: 100%; 
} 

.current a { 
    background: #70cb00; 
} 

DEMO