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

Question

我有使用Twitter的引导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;
}

关于JsFiddle的例子

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

Answer 1

可以使用的唯一相对单位(意味着对其他东西有反应)border是vh和vw单位.因此,border只有当它所在的元素也相对于视口大小时,才能响应地调整大小.演示

因此,您目前无法使用CSS进行操作,因为如果您使用视口单元设置高度和边框,则它们将不会响应文本内容.你必须给不同高度的课程,因此无论如何都要破坏相对大小的目的.

但是,这很容易使用javascript.你只需要遍历相关的元素,计算元素的高度,将其除以2并使其成为border-top和border-bottom,然后将其中的一部分border-left.演示

/* 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更容易访问.如果最终使用伪元素,则需要更改实际样式表,这样更难