2

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

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

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

提前致谢..

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

4

2 回答 2

5

您不能自动拉伸三角形。完成您想要的最简单的方法可能是为更高的菜单项定义一个小子类 - 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或者，您可以在:after伪元素上使用 CSS3 。但在这种情况下，您必须创建三角形的图像并将其设置为背景。这是一个 演示

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;
}
于 2012-08-14T23:18:31.400 回答
2

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

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

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

工作原理：每个 li 元素都有一个 before 伪元素，它是箭头的下半部分，是一个延伸到 500 x 1000 的 CSS 三角形。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的相关位中添加

于 2014-08-22T20:21:26.333 回答