Css 响应倾斜边界

我使用边框创建了一个倾斜样式的三角形，用于导航项，但是用于定义倾斜长度的边框是固定的，需要根据列表项中的内容进行调整。我还想为每个列表项使用相同的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 */
}

---

不能使用百分比作为边框宽度，但可以使用旋转的伪元素来制作倾斜的上边框：

li{
浮动：左；
位置：相对位置；
右边距：10px；
列表样式：无；
溢出：隐藏；
填充顶部：8px；
}
李阿{
显示：块；
背景：#a1a8ad；
填充物：5px12px；
颜色：#000；
高度：20px；
文字装饰：无；
}
李：以前{
内容：“；
位置：绝对位置；
排名：0；
右：0；
宽度：150%；
高度：30px；
背景：#a1a8ad；/*剃刀刀片颜色*/
-webkit转换来源：100%0；
-ms变换原点：100%0；
变换原点：100%0；
-webkit变换：旋转（-2deg）；
-ms变换：旋转（-2deg）；
变换：旋转（-2deg）；
z指数：-1；
}

你想如何输出你能发布一些你想要的图像设计吗？没有响应边框之类的东西，除非你使用JS。@sanojlawrence我试图实现的输出就是这样，抱歉，我应该让它变得更清晰一些。假效果不太理想。这很完美，谢谢！当我再获得7名代表时，我将投票：）