不同选项卡上的箭头指示器CSS
我注意到很多网站都会用下面这样的方式来显示你所在的页面或标签：
如您所见，有一个小箭头指示页码。如何使用纯CSS来实现这一点，或者大多数站点是否使用div的背景图像，而这些div的位置是使用background-position属性设置的？这似乎是一种相当常见的技术，所以前面提到的似乎不太可能。
您可以查看其他示例here和here。
回答 3
Stack Overflow用户
发布于 2012-05-10 21:49:35
如果您想要一个纯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>
Stack Overflow用户
发布于 2012-05-10 21:53:16
您也可以使用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/技术
Stack Overflow用户
发布于 2012-05-10 21:45:35
箭头几乎总是一个图像，但这通常都是通过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的源代码
请原谅我的手机自动纠错盖到处都是代码。
https://stackoverflow.com/questions/10535060
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号