CSS - 我如何在`border- *`属性中使用百分比？ [英] CSS - How can I use percents in `border-*` properties?

问题描述

我的代码使用了Twitter Bootstrap 3， nav 和右箭头 code> border - * 属性。但是，如果我在右箭头中使用非常长的文本，它不会展开，如果我使用百分比，代码将无法工作......

如何根据文本数量使三角形响应？ border 可以使用的是 vh 和 vw 单位。因此， border 只能在其所在元素也相对于视口大小时作出响应。 演示

$ b $因此，你现在不可能用CSS做什么，因为如果你设置视口单位的高度和边界，他们将不会对文本内容做出响应。你不得不为不同高度的课程授课，因此无论如何都要打破相对大小的目标。

然而，使用javascript很容易。您只需遍历相关元素，计算元素的高度，然后除以2，并使 border-top 和 border-底部，然后制作 border-left 的比例。 演示

  / * JS * / 
 var actives = document.getElementsByClassName（active），
 triangles = document.getElementsByClassName（triangle） ; 
 
 for（var i = 0，l = actives.length; 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;剩余
：100％; / *将它放在右边* / 
上：50％; 
 border-color：transparent; / *使所有其他面透明* / 
 border-left-color：＃428bca; / *为重要的边添加颜色* / 
 border-style：solid; / *此属性是显示* / 
 
  

实际DOM）元素与使用javascript方法的伪元素相对，因为它们使用DOM更容易访问。如果最终使用伪元素，则需要更改更困难的实际样式表。

b $ b

I have code which uses the Twitter Bootstrap 3, nav with right-arrow, which I created using border-* properties. But if I use very long text in right-arrow, it does not expand, and if I use percents, the code will not work...

Example on JsFiddle

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

Example on JsFiddle

How can I make the triangle responsive based on the amount of text?

解决方案

The only relative unit (meaning reactive to something else) that border can use is the vh and vw units. As a result, border can only be responsively sized when the element it is on is also sized relative to the viewport. Demo

As a result, what you're trying to do with CSS is not currently possible because if you set the height and border with viewport units then they will not respond to the text content. You'd have to give a class to the ones of varying height, thus defeat the purpose of relative sizing anyway.

However, this is pretty easy to do using javascript. You just need to iterate through the relevant elements, calculate the height of the element, divide that by 2 and make that the border-top and border-bottom, then make a proportion of that the 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 */
}

Actual (meaning in the DOM) elements are suggested as opposed to pseudo elements using the javascript approach because they are much easier to access using the DOM. If you do end up using pseudo elements, you will need to change the actual stylesheets which is more difficult

这篇关于CSS - 我如何在`border- *`属性中使用百分比？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！