具有动态高度的CSS三角形

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

注意’更长的措辞示例’ – 如何让三角形箭头指示符垂直缩放以动态填充所选的蓝色区域高度？ （三角形是在最后一条css规则中生成的..）

我很难过！ 有人有任何想法吗？

提前致谢..

编辑 – 自Zoltans的回答以来，我在这里找到了Jquery： http ：//jsbin.com/uviyat/12/edit不确定它是否是最好的方法？ 价值’16’来自哪里？

Answer 1

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

 
Longer Wording Example
  

…

UPDATE

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

Answer 2

http://jsbin.com/hefavo/1/edit

嘿我偶然发现了这个试图做类似事情的问题。 看看我的解决方案。 它并不完美，因为你无法改变箭头的角度（边框宽度不能是百分比），这意味着箭头总是会伸出一定的距离。

例如，如果你尝试一个三行高的东西，它会看起来很奇怪。 但是，要调整它，您只需将前后伪元素的“margin-left”设置为15px即可。

工作原理：每个li元素都有一个前伪元素，它是箭头的下半部分，作为css三角形，扩展到500 x 1000. after伪元素是上半部分。 然后将三角形定位到菜单项的右侧（不完全是……见下文），左边距设置控制它突出的程度。

 .filters .selected:before { position:absolute; height: 0; top: 50%; // transform:scaleY(-1); max-width: 300%; border-right: 500px solid #3aa5de; border-bottom: 1000px solid transparent; content: ""; left: 50%; border-radius:0; margin-left: 10px; transform: scaleX(-1) translateX(100%); } .filters .selected:after { position:absolute; height: 0; top: 50%; transform:scaleY(-1) scaleX(-1) translateY(100%) translateX(100%); max-width: 300%; border-radius:0; border-right: 500px solid #3aa5de; border-bottom: 1000px solid transparent; content: ""; left: 50%; margin-left: 10px; } 

li元素本身用于掩盖我们不需要的三角形部分。 由于三角形突出超过前一个“100％”，我将li元素宽度设置为200％，将伪元素位置设置为50％，并将a元素（菜单项）设置为50％宽度。

 .filters li{ overflow:hidden; width: 200%; position:relative; } .filters li a{ width:50%; position:relative; z-index: 1; } 

编辑：在css的相关位中添加