Jquery 不同选项卡上的箭头指示器CSS

我注意到，许多网站都会通过以下方式显示您所在的页面或选项卡：

如您所见，有一个小箭头指示页码。如何使用纯CSS实现这一点，或者大多数站点使用div的背景图像，并使用“背景位置”属性设置位置？这似乎是一种相当常见的技术，因此前面提到的似乎不太可能

---

您可以看到其他示例和示例。如果解决方案在水平和垂直方向上都能工作，那就太好了。

箭头几乎总是一个图像，但这通常都是通过CSS类完成的

CSS中的示例

.menu {
Font: whatever;
Background:url("image/parallel.PNG");
}
.current {
Background:URL("image/arrow.PNG");
}

和HTML

<div class="menu">home</div>
<div class="menu current">about</div>

主页
关于

这将为两个菜单项提供字体，但只有一个菜单项具有箭头背景 您还可以将所有这些内容放在一个容器中，并将样式应用于样式中的所有子元素，然后只需将class=“current”添加到当前页面

查看此页面的源代码

---

请原谅我的手机自动更正了所有代码

如果需要纯CSS解决方案，可以使用

：after

伪元素执行类似操作

span{
位置：相对位置；
填充：15px；
颜色：白色；
背景：黑色；
}
.当前：之后{
内容：“；
位置：绝对位置；
底部：-10px；
左：18px；
边框宽度：15px 15px 0；
边框样式：实心；
边框颜色：黑色透明；
}

主页
其他
Etc

您也可以使用css边框来实现这一点。 如果您具有以下结构

<div class="menu">home</div>
<div class="menu current">about</div>
<div class="menu">Contact</div>

---

这是一个很好的教程，解释了该技术

您可以将两个css类分配给

li

（或

div

或当前标记的任何元素）；一个是常规样式，另一个是你可以设置背景图像或任何你喜欢的装饰。也许这会有帮助：如果你想通过CSS3创建这个，最近有一个网站曝光，它为你提供了你需要的CSS。看一看：如果你正在寻找一个跨浏览器的解决方案，它是值得考虑的背景图像根据以前的答案：）伟大的链接！很酷的演示：）谢谢你的回答，在这样的例子中它是如何工作的呢？那是一个使用JavaScript的弹出菜单。可以使用CSS完成，但使用JavaScript更容易。

.current:after {
  content: '';
  position: absolute;

  width: 0;
  height: 0;

  border: 15px solid;
  border-top-color: #292929;

  top: 100%;
  left: 50%;
  margin-left: -15px; /* adjust for border width */
}