什么是这个带有三角形的CSS活动菜单样式？

Question

在下图中，我已经模拟了一个CSS活动菜单样式，我希望找到一些示例，并希望能够复制。

您会注意到有一个三角形突出显示活动菜单，它也可以显示为粗体。

问题1.实际上这个“活动菜单三角形样式”是什么？所以我可以找到CSS的例子。

问题2.我在哪里可以找到这方面的例子？

Answer 1

我不知道它是如何调用的，但我猜它不对应任何CSS属性。你必须用背景图像来实现这一目标。

Answer 2

我认为没有这个名字，但是在CSS中很难在不添加背景图像的情况下制作它。使用图像非常简单，请参阅其他评论。

你当然可以使用:after和一些CSS3技巧来创建一个模拟箭头的元素，如下所示：

http://jsfiddle.net/upeRE/2/

但它不适用于所有浏览器，您必须确切知道菜单项的宽度。

Answer 3

所有这些都是通过css类完成的：

<强> HTML

<ul>
    <li><a href="#">Menu Item 1</li>
    <li><a href="#" class="selected">Menu Item 2</li>
    <li><a href="#">Menu Item 3</li>
    ....
</ul>

<强> CSS

ul li a {padding: 6px; border-bottom: 1px solid #666; background-image: none; color: #454545}

ul li a.selected { background: #fff url(triangle.png) no-repeat center bottom}

调整背景位置，直到它与边框贴合。

Answer 4

形状称为CSS多边形。 Tantek Celik是最早在2001年撰写该技术的人之一。设计模式称为location-based breadcrumb。

Answer 5

您需要查找css三角形菜单（或css3三角形）。 这些都是透明的边框。 如何在这里制作三角形有一个很好的解释：

http://jonrohan.me/guide/css/creating-triangles-in-css/