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

Question

我注意到许多网站使用以下内容表示您所在的页面或标签：

如您所见，有一个小箭头表示页码。如何使用纯CSS实现这一点，或者大多数网站是否使用div设置使用background-position属性的位置的背景图像？这似乎是一种相当普遍的技术，因此上述内容似乎不太可能。

您可以看到其他示例here和here。如果解决方案可以水平和垂直旋转，那将会很不错。

Answer 1

如果你想要一个纯CSS解决方案，你可以使用:after伪元素做这样的事情。

span {
position: relative;
padding: 15px;
color: white;
background: black;
}

.current:after {
content: "";
position: absolute;
bottom: -10px;
left: 18px;
border-width: 15px 15px 0;
border-style: solid;
border-color: black transparent;
}

<span class="current">Home</span>
<span>Other</span>
<span>Etc</span>

Answer 2

您也可以使用css边框来完成此任务。 如果您有以下结构

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

然后您可以使用以下css在活动菜单下绘制语音气泡或箭头

.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 */
}

这是一个很好的教程，解释了技术http://net.tutsplus.com/tutorials/html-css-techniques/css-refreshers-borders/

Answer 3

箭头几乎总是一个图像，但这通常都是用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”添加到当前页面。

查看此页面的来源 http://dynamicinteractions.com/home

请原谅我的手机在整个代码中自动更正大写字母。