Отзывчивая наклонная граница

Question

Я создал треугольник с уклоном, используя границы для использования на элементах навигации, однако граница, которая используется для определения длины наклонности, фиксирована и ее необходимо адаптировать на основе содержимого внутри элемента списка. Я также хочу использовать один и тот же класс css для каждого элемента списка.

Является ли это лучшим решением для того, чего я пытаюсь достичь, или есть альтернативный метод, который имеет тот же результат?

Я также открыт для решений JS.

Я использовал следующий CSS до сих пор:

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

Вы не можете использовать проценты за границы ширины, но вы можете использовать повернутый элемент псевдо сделать наклонную верхнюю границу :

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>