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

问题描述

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

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

上的示例 JsFiddle

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

Example on JsFiddle

如何根据文字数量使三角形响应?

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

推荐答案

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

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

因此，您目前无法使用CSS进行处理，因为如果您设置视口单位的高度和边界，那么它们将不会响应文本内容.您必须为身高各异的学生提供一门课程，从而无论如何都无法达到相对尺码的目的.

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.

但是，使用javascript很容易做到这一点.您只需要遍历相关元素，计算元素的高度，将其除以2并得出border-top和border-bottom，然后按比例分配border-left. 该演示

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 */
}

与javascript方法相比，建议使用

Actual(在DOM中表示含义)元素与伪元素相对，因为使用DOM可以更轻松地访问它们.如果最终使用伪元素，则需要更改实际的样式表，这会更加困难

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

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