html - 如何在 `border-*` 属性中使用百分比？

Question

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

关于 的示例 JsFiddle

.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

如何根据文本量使三 Angular 形响应？

Answer 1

border 可以使用的唯一相对 单位(意思是对其他事物的 react )是vh 和vw 单位。因此，border 只能在它所在的元素也相对于视口(viewport)调整大小时才能响应式调整大小。 Demo

因此，您尝试使用 CSS 执行的操作目前无法实现，因为如果您使用视口(viewport)单位设置高度和边框，那么它们将不会响应文本内容。您必须为不同高度的人上课，因此无论如何都会打败相对大小的目的。

但是，使用 javascript 可以很容易地做到这一点。您只需要遍历相关元素，计算元素的高度，将其除以 2 得到 border-top 和 border-bottom，然后制作一个border-left 的比例。 Demo of that

/* 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 访问它们要容易得多。如果你最终使用了伪元素，你将需要更改实际的样式表，即 more difficult