Question

Wondering if anybody can help with a css problem I’m having.. see this jsbin:
http://jsbin.com/uviyat/2/edit

Notice ‘Longer Wording Example’ – how can I get the triangle arrow indicator to scale vertically to dynamically fill the selected blue area height? (The triangle is generated in the last css rule..)

I’m stumped! Anybody got any ideas?

Thanks in advance..

EDIT – since Zoltans’s answer, I’ve had a go with Jquery here:
http://jsbin.com/uviyat/12/edit
Not sure if its the best way to do it? Where does the value ’16’ come from?

Answer 1

You can’t auto stretch the triangle. The simplest way to accomplish what you want is, probably, to define a small subclass for taller menu items – http://jsbin.com/uviyat/3/edit

<li class="selected tall"><a href="#">Longer  Wording Example</a></li>

<style>
.filters .selected.tall:after {
  margin-top: -36px;
  border-width: 20px 0 20px 7px;
}
</style>

…

UPDATE

Alternatively you can use the CSS3 background-size: cover on the :after pseudo-element. But in that case you have to create an image of the triangle and set it as a background. Here is a DEMO

li {
    width: 100px;
    border: 1px solid #eee;
    margin: 3px;
    position: relative;
}

li:after {
    content: ' ';
    display: block;
    position: absolute;
    right: -20px;
    width: 20px;
    top: 0;
    bottom: 0;
    background: url(http://lorempixel.com/20/20) no-repeat;
    background-size: cover;
}