jquery - 具有动态高度的 CSS 三 Angular 形

Question

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

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

我被难住了!有人有什么想法吗？

提前致谢..

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

Answer 1

您无法自动拉伸(stretch)三 Angular 形。实现您想要的最简单的方法可能是为较高的菜单项定义一个小子类 - 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>

...

更新

或者，您可以在 :after 伪元素上使用 CSS3 background-size: cover。但在这种情况下，您必须创建三 Angular 形的图像并将其设置为背景。这是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;
}