CSS/JS 中导航菜单中的箭头（例如 playframework.org）答案

【问题标题】：Arrow in nav menus in CSS/JS (e.g. playframework.org)CSS/JS 中导航菜单中的箭头（例如 playframework.org）
【发布时间】：2011-03-12 16:04:06
【问题描述】：

http://www.playframework.org 网站顶部的导航菜单有一个向上指向当前选定部分（主页、学习、下载...）的小箭头。我试图了解他们使用的实现，但我无法理解它 - 资源没有显示在 Chrome 的资源窗口中，并且对元素的检查没有显示任何背景图像的迹象，也没有JS 拦截器（虽然我可能错过了）。地狱犬的名字在那里发生了什么？ :)

【问题讨论】：

删除 content: " ." 会删除箭头。另外，border-right: 0.8em solid transparent 是箭头的右侧，border-left 是左侧。
示例参考实现：jsfiddle.net/8DZZQ/13 在相关问题stackoverflow.com/questions/15229757/sliding-nav-arrow?rq=1中找到

标签： javascript html css navigation

【解决方案1】：

这是 HTML：

<ul id="menu"> 
<li class="selected"> 
<a href="/">Home</a><span>&gt;</span> 
</li> 
...

魔法发生在这段 CSS 中：

#menu .selected a:after {
    content: " .";
    display: block;
    text-indent: -99em;
    border-bottom: 0.8em solid #8adc92;
    border-left: 0.8em solid transparent;
    border-right: 0.8em solid transparent;
    border-top: none;
    height: 0px;
    margin-left: -.8em;
    margin-right: auto;
    margin-top: 14px;
    position: absolute;
    left: 50%;
    width: 1px;
}

这个技术叫做CSS箭头，网上可以找到很多文章和例子

（编辑： @jeroen 发布了一个非常好的帖子）。

【讨论】：

【解决方案2】：

看起来他们使用了 CSS 箭头，请参阅 more information here。

【讨论】：

【解决方案3】：

这里有一个链接可以查看它的实际效果

http://jsfiddle.net/zC5cp/

.box{
    background: red;
    color: #FFF;
    width: 100px;
    height: 100px;
    position:relative;
}

.arrow-up {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;

    border-bottom: 10px solid white;
    position: absolute;
    bottom: 0px;
    margin-left: -10px;
    left:50%;  
}

【讨论】：