这种带三角形的 CSS 活动菜单样式叫什么？
在下图中，我模拟了一个 CSS 活动菜单样式，我希望找到示例并希望能够复制。
您会注意到有一个三角形突出显示活动菜单，并且它也可以显示为粗体。
问题 1. 这种“活动菜单三角形样式”实际上叫什么？所以我可以找到它的 CSS 示例。
问题 2. 我在哪里可以找到这方面的示例？
In the following picture, I have mocked up a CSS active menu styling I would like to find examples of, and hopefully replicate.
You will notice there is a triangle highlighting the active menu, and it can appear bold too.
Question 1. What is this "active menu triangle style" actually called? So I can find CSS examples of it.
Question 2. Where can I find examples of this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
我不知道它是如何调用的，但我猜它不对应于任何 CSS 属性。我认为你必须使用背景图像来实现这一点。
I don't know how it is called, but I guess it does not correspond to any CSS property. You'll have to achieve this with background images I think.
我不认为这个有一个名称，但是如果不添加背景图像，很难在 CSS 中实现它。有了图像就很容易了，请参阅其他评论。
当然，您可以使用
:after和一些 CSS3 技巧来创建一个模拟箭头的元素，如下所示：http://jsfiddle.net/upeRE/2/
但它并不适用于所有浏览器，您必须确切地知道菜单项的宽度。
I don't think there's a name for this, but it's going to be hard to make this in CSS without having to add a background image. With images it's fairly easy, see the other comments.
You could of course use
:afterwith some CSS3 tricks to create an element simulating the arrow, like this:http://jsfiddle.net/upeRE/2/
But it won't work in every browser and you'd have to know exactly how wide your menu items are.
所有这些都是通过 css 类完成的，如下所示：
html
css
调整背景位置，直到它与边框紧密贴合。
All done through css classes like so:
html
css
Tweak the background-position until it fits snuggly with the border.
该形状称为 CSS 多边形。 Tantek Celik 是 2001 年最早撰写该技术的人之一。设计模式是称为 位置-基于面包屑的。
The shape is called a CSS polygon. Tantek Celik was one of the first to write about the technique in 2001. The design pattern is called a location-based breadcrumb.
您需要寻找 css 三角形菜单（或 css3 三角形）。
它们的边框是透明的。
这里有一个关于如何制作三角形的很好的解释：
http:// jonrohan.me/guide/css/creating-triangles-in-css/
You need to look for css triangles menus (or css3 triangles).
These are made with borders that are transparent.
There is a good explanation of how you can make the triangles here:
http://jonrohan.me/guide/css/creating-triangles-in-css/