响应式倾斜边框

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>