Question

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

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

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

提前致谢..

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

Answer 1

您无法自动拉伸三角形。实现所需目标的最简单方法可能是为较高的菜单项定义一个小子类 - 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>

...

<强>更新

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

具有动态高度的CSS三角形

2 个答案: