À quoi sert ce style de menu actif CSS avec triangle?

Question

Dans l'image suivante, j'ai simulé un style de menu actif CSS dont j'aimerais trouver des exemples, et je l'espère reproduire.

Vous remarquerez qu'il ya un triangle mettant en évidence le menu actif, et il peut apparaître en gras aussi.

Question 1. Qu'est-ce que ce "style triangle de menu actif" appelé? Je peux donc trouver des exemples de CSS.

Question 2. Où puis-je trouver des exemples?

Answer 1

Tout est fait à travers des classes CSS comme ceci:

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 la position de fond jusqu'à ce qu'il soit snuggly à la frontière.

Answer 2

Je ne sais pas comment il s'appelle, mais je suppose qu'il ne correspond à aucune propriété CSS. Vous devrez y parvenir avec des images d'arrière-plan je pense.

Answer 3

Je ne pense pas qu'il y ait un nom pour cela, mais il sera difficile de le faire en CSS sans avoir à ajouter une image de fond. Avec les images c'est assez facile, voir les autres commentaires.

Vous pouvez bien sûr utiliser :after avec quelques astuces CSS3 pour créer un élément simulant la flèche, comme celui-ci:

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

Mais cela ne fonctionnera pas dans tous les navigateurs et que vous devez savoir exactement la largeur de vos éléments de menu.

Answer 4

Vous devez rechercher les menus triangles CSS (ou les triangles CSS3). Ils sont fabriqués avec des bordures transparentes. Il y a une bonne explication de la façon dont vous pouvez faire les triangles ici:

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

Answer 5

La forme est appelée un polygone CSS. Tantek Celik a été l'un des premiers à écrire sur la technique en 2001. Le motif de conception est appelé location-based breadcrumb.