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

Question

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

Answer 1

这就是 HTML：

<ul id="menu"> 
<li class="selected"> 
<a href="/">Home</a><span>></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< /code> 发布了一篇非常好的文章）。

Answer 2

看起来他们使用了 css 箭头，请参阅 更多信息请参见此处。

Answer 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%;  
}