如何在“border-*”属性中使用百分比？

我有使用 Twitter Bootstrap 3 的代码，nav with right-arrow，我使用它创建的border-*特性。但是如果我在中使用很长的文本right-arrow，它不会扩展，如果我使用百分比，代码将无法工作......

示例JsFiddle http://jsfiddle.net/W623k/

.custom-nav-stacked>li>a {
  border-radius: 2px;
}

.custom-nav-stacked>li.active>a:after,
.custom-nav-stacked>li.active>a:hover:after,
.custom-nav-stacked>li.active>a:focus:after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -19px;
  /*margin-left: -1px;*/
  border-top: 19px solid transparent;
  border-left: 13px solid #428bca;
  border-bottom: 19px solid transparent;
}

<div class="container" style="margin-top:  20px">
  <div class="row">
    <div class="col-md-2" style="width: 300px /* width there only for pretty demo */">
      <ul class="nav nav-pills nav-stacked custom-nav-stacked">
        <li class="active"><a href="#">A long long text</a></li>
        <li><a href="#">Small text</a></li>
        <li class="active"><a href="#">A long long long long long long long long long text</a></li>
        <li><a href="#">Small text 111</a></li>
      </ul>
    </div>
  </div>
</div>

示例JsFiddle http://jsfiddle.net/W623k/

如何使三角形根据文本量做出响应？

唯一的relative单位（意思是对其他事物做出反应）border可以使用的是vh and vw单位。因此，border仅当其所在的元素为also相对于视口的大小。Demo http://jsfiddle.net/Zeaklous/W623k/3/

因此，您尝试使用 CSS 执行的操作目前是不可能的，因为如果您使用视口单位设置高度和边框，那么它们将不会响应文本内容。你必须给不同身高的人一个班级，这样就违背了相对尺寸的目的。

然而，使用 javascript 可以很容易地做到这一点。您只需要迭代相关元素，计算元素的高度，将其除以 2 并将其设为border-top and border-bottom，然后计算其中的比例border-left. 演示那个 http://jsfiddle.net/Zeaklous/W623k/4/

/* JS */
var actives = document.getElementsByClassName("active"),
    triangles = document.getElementsByClassName("triangle");

for(var i = 0, l = actives.length; i < l; i++) {
    triangles[i].style.borderTopWidth = actives[i].clientHeight / 2 + "px";
    triangles[i].style.borderBottomWidth = actives[i].clientHeight / 2 + "px";
    triangles[i].style.borderLeftWidth = actives[i].clientHeight / 3 + "px";
    triangles[i].style.marginTop = - actives[i].clientHeight / 2 + "px";
}

/* CSS */
li.active .triangle {
    position: absolute;
    left: 100%; /* Position it to the right */
    top: 50%;
    border-color:transparent; /* Make all other sides transparent */
    border-left-color:#428bca; /* Add color to the side that matters */
    border-style:solid; /* This property is necessary to make it show */
}

建议使用实际（在 DOM 中的意思）元素，而不是使用 javascript 方法的伪元素，因为使用 DOM 更容易访问它们。如果您最终使用了伪元素，则需要更改实际的样式表，即更加困难 https://stackoverflow.com/a/21709814/2065702