Как называется этот стиль меню 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}

Tweakположение фона, пока оно плотно не прилегает к границе.

Answer 4

Форма называется многоугольником CSS. Тантек Челик был одним из первых, кто написал о технике в 2001 году. Шаблон проектирования называется базирующейся на местоположении хлебной крошкой .

Answer 5

Вам нужно искать меню треугольников CSS (или треугольников CSS3). Они сделаны с прозрачными границами. Вот хорошее объяснение того, как вы можете сделать треугольники здесь:

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