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

【问题标题】：Arrow indicator CSS on different tabs不同选项卡上的箭头指示器 CSS
【发布时间】：2012-05-19 02:06:54
【问题描述】：

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

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

您可以查看其他示例 here 和 here。如果解决方案可以水平和垂直旋转，那就太好了。

【问题讨论】：

您可以将两个css类分配给li（或div或任何作为当前标记的元素）；一种是常规样式，另一种是您设置背景图像或您喜欢的任何装饰。
也许这会有所帮助：css-tricks.com/snippets/css/css-triangle
如果您想通过 CSS3 创建这个，最近出现了一个网站，它可以为您提供所需的 CSS。看看：http://cssarrowplease.com/ 不过，如果您正在寻找跨浏览器解决方案，那么根据之前的答案，值得考虑背景图片 :)
很好的链接！很酷的演示:)

标签： jquery html css css-shapes

【解决方案1】：

箭头几乎总是一个图像，但这通常都是用 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

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

【讨论】：

感谢您的回答，那么它在这样的示例中是如何工作的：dribbble.com/shots/553791-Web-App-UI?list=tags&tag=ui
这是一个使用 JavaScript 的弹出菜单。可以使用 CSS 完成，但使用 JavaScript 更容易。

【解决方案2】：

如果您想要一个纯 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>

【讨论】：

【解决方案3】：

您也可以使用 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/

【讨论】：