2

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

在此处输入图像描述

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

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

4

3 回答 3

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/

于 2012-05-10T13:53:16.383 回答
2

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

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>

于 2012-05-10T13:49:34.963 回答
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

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

于 2012-05-10T13:45:34.810 回答