Question

我的代码使用Twitter Bootstrap 3，nav和right-arrow，我使用border-*属性创建。但是如果我在right-arrow中使用非常长的文本，它就不会扩展，如果我使用百分比，代码将无效...

上的示例

enter image description here

<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>

.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只能在其所在的元素相对于视口大小时响应大小。 Demo

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

但是，这很容易使用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

的实际样式表

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

1 个答案: