Треугольные булеты в меню

Чтобы в вашем списке ссылок (меню) использовать треугольные булеты (маркеры), для этого необязательно рисовать картинку, можно немного поиграться с бордерами, чтобы получить то, что нам необходимо

HTML

<ul id="menu">
    <li><a href="#">О компании</a></li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Контакты</a></li>
</ul>

CSS

ul#menu {
  list-style: none;
  padding: 0px;
  margin: 0px;
}
ul#menu li {
  float: left;
  overflow: visible;
  height: 0px;
  margin-left: 14px;
  padding-left: 4px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid blue;
}
ul#menu li a {
  display: block;
  margin-top: -0.7em;
}

В итоге мы получим нечто подобное:

Похожие публикации:

1. Разделители в меню
   Довольно часто приходится верстать просты меню с разделителем - вертикальной чертой. Рашил поделиться рецептом - надеюсь кому-то будет полезен. HTML...
2. Центрирование меню
   Разработал для себя определенную систему: кроссбраузерную, валидную, семантичную. Одним из пунктов ее является меню, составленное из тегов <ul><li>. Хотелось бы...
3. Диагностический CSS
   Eric Meyer предложил использовать CSS-правила для выявления ошибок на странице при верстке страницы. Код показывает ошибки на странице, если у...
4. Выбираем окончания для существительных с количественным числительным
   В русском языке существительные с количественным числительными могут быть в единственном, двойственном и множественном числе: один голос, два голоса, пять...

Теги: CSS, HTML

Поделиться: