반응하는 경사 테두리

Question

경사를 정의하는 데 사용되는 테두리가 고정되어 있고 목록 항목 내부의 내용을 기반으로 적응해야하지만 테두리를 사용하여 탐색 항목에 사용하는 경사 스타일 삼각형을 만들었습니다. 또한 각 목록 항목에 동일한 CSS 클래스를 사용하려고합니다.

내가 얻으려고하는 것에 대한 최선의 해결책인가, 아니면 같은 결과를내는 대체 방법이 있습니까?

JS 솔루션에도 열려 있습니다.

li { 
    float: left; 
    position: relative; 
    height: 20px; 
    background: #a1a8ad; 
    padding: 5px 12px; 
    margin-right: 10px; 
    list-style: none; 
} 

li:before { 
    content: ""; 
    position: absolute; 
    top: -3px; 
    width: 0; 
    height: 1px; 
    left: 0px; 
    border-right: 63px solid #a1a8ad; /* razorblade color */ 
    border-top: 2px solid rgba(0, 0, 0, 0); /* transparent */ 
} 

JSFiddle here

Answer 1

당신은 경계 폭에 대한 비율을 사용할 수 있지만 기울어 진 위쪽 테두리를 만들기 위해 회전 된 의사 요소를 사용할 수 있습니다

지금까지 다음과 같은 CSS를 사용했다 :

li { 
 
    float: left; 
 
    position: relative; 
 
    margin-right: 10px; 
 
    list-style: none; 
 
    overflow: hidden; 
 
    padding-top: 8px; 
 
} 
 
li a { 
 
    display: block; 
 
    background: #a1a8ad; 
 
    padding: 5px 12px; 
 
    color: #000; 
 
    height: 20px; 
 
    text-decoration: none; 
 
} 
 
li:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 150%; 
 
    height: 30px; 
 
    background: #a1a8ad; /* razorblade color */ 
 
    -webkit-transform-origin: 100% 0; 
 
    -ms-transform-origin: 100% 0; 
 
    transform-origin: 100% 0; 
 
    -webkit-transform: rotate(-2deg); 
 
    -ms-transform: rotate(-2deg); 
 
    transform: rotate(-2deg); 
 
    z-index: -1; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">About Us</a> 
 
    </li> 
 
    </ul> 
 
</nav>