지그재그 선 메뉴 버튼 CSS

Question

나는 이것에 대한 연구를 해봤지만 정확한 정보를 찾을 수없는 것 같습니다. 나는 나의 탐색 모음의 위쪽에 지그재그 선을 얻기 위해 노력하고있어 나는 매우 간단하게 일을 설명하기 위해 위의 이미지를 만들었습니다

. 위쪽 지그재그는 이미지이며, 선택한 파란색으로 표시된 것과 같은 탐색 모음 맨 위에 같은 종류의 효과를 얻고 싶습니다. 간단히 포토샵을 사용하여 효과를 복사하고 탐색 바에 편집했습니다.

이 효과를 내기 위해 메뉴 항목에 CSS를 추가 할 수있는 방법이 있습니까?

만약 내가 거기에 그것을 얻을 수 있습니까?

Answer 1

정확하게 이해한다면 css를 사용하여 많은 작은 삼각형을 만들고 싶을 것입니다. 그렇다면이 문서는 위대한 기사입니다. here 기본적으로 그라데이션을 사용하여 다시 삼각형을 만듭니다. 그것의 JS 바이올린이 문제를 해결해야

이

ul li { 
 
    display: inline; 
 
    position: relative; 
 
    padding: 16px 8px 8px 8px; 
 
    background: #dddccf; 
 
} 
 
ul li:before { 
 
    background: linear-gradient(145deg, #ffffff 8px, transparent 0), linear-gradient(-145deg, #ffffff 8px, transparent 0); 
 
    background-repeat: repeat-x; 
 
    background-size: 16px 16px; 
 
    content: " "; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 100%; 
 
    height: 32px; 
 
    background-position: left-bottom; 
 
}

<ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
</ul>

here를 찾을 수 있습니다. 삼각형의 크기는 배경 크기와 선형 그래디언트로 조정할 수 있습니다.