Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I use percents in `border-*` properties?

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

enter image description here

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

Example on JsFiddle

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

like image 727
Patrick Burns Avatar asked Jul 30 '14 23:07

Patrick Burns


People also ask

Can you use percentages in Borders CSS?

Percentage values are not applicable to border-width in CSS. This is listed in the spec. You will need to use JavaScript to calculate the percentage of the element's width or whatever length quantity you need, and apply the result in px or similar to the element's borders.

What are the properties of border?

The border property in CSS is used to style the border of an element. This property is a combination of three other properties border-width, border-style, and border-color as can be used as a shorthand notation for these three properties.

Which property is used to set the style of the border?

The border-style CSS property is a shorthand property that sets the line style for all four sides of an element's border.


1 Answers

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

like image 50
Zach Saucier Avatar answered Sep 29 '22 08:09

Zach Saucier