What is this CSS active menu style with triangle c

Question

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?

Answer 1

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.

Answer 2

All done through css classes like so:

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}

Tweak the background-position until it fits snuggly with the border.

Answer 3

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 :after with 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.

Answer 4

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/

Answer 5

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.