动态高度的CSS三角形 [英] CSS triangle with dynamic height

问题描述

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

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

注意更长的文字示例" –如何使三角形箭头指示器垂直缩放以动态填充选定的蓝色区域高度? (三角形是在最后一个CSS规则中生成的.)

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?

先谢谢了.

编辑-自Zoltans回答以来，我在这里一直使用Jquery: http://jsbin.com/uviyat/12/edit 不知道这是否是最好的方法?值"16"从何而来?

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?

推荐答案

您不能自动拉伸三角形.完成所需内容的最简单方法可能是为较高的菜单项定义一个小的子类- http://jsbin.com/uviyat/3/edit

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>

...

更新

或者，您可以在:after伪元素上使用CSS3 background-size: cover.但是在这种情况下，您必须创建三角形的图像并将其设置为背景.这是 演示

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

这篇关于动态高度的CSS三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！