具有动态高度的 CSS 三角形

想知道是否有人可以帮助解决我遇到的 css 问题..请参阅此 jsbin：http://jsbin.com/uviyat/2/edit http://jsbin.com/uviyat/2/edit

注意“较长的措辞示例”——如何使三角形箭头指示器垂直缩放以动态填充所选蓝色区域的高度？ （三角形是在最后一个CSS规则中生成的..）

我很难过！有人有什么想法吗？

提前致谢..

EDIT- 自从 Zoltans 回答以来，我在这里尝试了 Jquery：http://jsbin.com/uviyat/12/edit http://jsbin.com/uviyat/12/edit不确定这是否是最好的方法？值“16”从何而来？

您无法自动拉伸三角形。实现您想要的最简单的方法可能是为较高的菜单项定义一个小子类 -http://jsbin.com/uviyat/3/edit 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

或者你可以使用 CSS3background-size: cover on the :after伪元素。但在这种情况下，您必须创建三角形的图像并将其设置为背景。这里有一个DEMO http://jsfiddle.net/5Q8zX/2/

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