За последнее время CSS и CSS3 сильно продвинулись вперед и поэтому старые стили, которые используют картинки на заднем фоне для получения нужной фигуры — больше не требуются.

В этой статье я расскажу как сделать хлебные крошки на сайте с помощь HTML и CSS в стиле flat. Так же можете посмотреть интересные flat шаблоны сайтов, может что-нибудь пригодиться. Я недавно делал подборку.

В конце мы получим вот такой результат:

Ранее, для того чтобы сделать прозрачную стрелки между двумя блоками использовалась прозрачная картинка на заднем фоне. Теперь данная проблема может быть решена используя только CSS.

1. Каркас крошек

<div id="crumbs"> 
    <ul>
        <li><a href="#">Breadcrumb</a></li> 
    </ul>
</div>

Для начала создадим маркированный список — <ul>, в котором будут <li> элементы. Хлебная крошка будет добавляться с помощью добавления нового <li>.

2. Добавляем CSS

Теперь напишем CSS, чтобы выглядело как тут:

#crumbs ul li a {
  display: block;
  float: left;
  height: 50px;
  background: #3498db;
  text-align: center;
  padding: 30px 40px 0 40px;
  position: relative;
  margin: 0 10px 0 0;
  font-size: 20px;
  text-decoration: none;
  color: #fff;
}

Данные стили добавляют:

вид для ссылки в виде блока и синий цвет
центрируют текст и делаем его белым
ровный padding , чтобы блок отображался корректно по вертикали
сбрасывает иные стили для ссылок с text-decoration: none

Внимание: position: relative добавлен для того, чтобы позже сдерживать все внутренние блоки с position: absolute.

3. Создаем эффект стрелки

#crumbs ul li a:after {
  content: "";
  border-top: 40px solid red;
  border-bottom: 40px solid red;
  border-left: 40px solid blue;
  position: absolute;
  right: -40px;
  top: 0;
}

Для создания стрелок мы будем использовать свойство :after, которое позволяет создавать дополнительный элемент после родителя. Добавляем ему position: absolute — для этого мы и делали positive: relative для ссылок <a>, чтобы удержать absolute свойство внутри ссылки и манипулировать им как нам хочется.

Вид стрелки будет сделан с помощью использования border’ов. В примере специально использован красный цвет, но чтобы придать вид треугольника будет использоваться transparent. Далее border будет пододвинут на месте с использование position: absolute.

4. Добавляем прозрачность с border

Меняем red в border на transparent, чтобы создать эффект прозрачности.

border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #3498db;

5. Добавляем стрелку сзади

#crumbs ul li a:before {
  content: "";
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 40px solid #d4f2ff;
  position: absolute;
  left: 0;
  top: 0;
}

Используя тот же принцип как и в третьем этапе — можно создать прозрачный треугольник позади блока. Цвет border должен быть поставлен как и задний цвет сайта, чтобы создавался эффект прозрачности.

padding: 30px 40px 0 80px;

5. Добавляем новые элементы

Добавляя новые <li> увеличивают глубину хлебной крошки.

<div id="crumbs">
    <ul>
        <li><a href="#1">Один</a></li>
        <li><a href="#2">Два</a></li>
        <li><a href="#3">Три</a></li>
        <li><a href="#4">Четыре</a></li>
        <li><a href="#5">Пять</a></li>
    </ul>
</div>

6. Первый и последний <li>

Чтобы создать эффект закругления для первого и последнего элемента в хлебной крошки мы будем использовать :first-child и :last-child.

#crumbs ul li:first-child a {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

#crumbs ul li:first-child a:before {
  display: none;
}

#crumbs ul li:last-child a {
  padding-right: 80px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

#crumbs ul li:last-child a:after {
  display: none;
}

7. Добавляем hover эффект

После чего нужно сделать выделения ссылки при наведении на нее. Цвет выделения можно выбрать по вашему вкусы — как пожелаете.

#crumbs ul li a:hover {
  background: #fa5ba5;
}

#crumbs ul li a:hover:after {
  border-left-color: #fa5ba5;
}

Так же не забудьте добавить border-radius при наведении на первый и последний элемент в хлебной крошке.

Вот что у нас получилось: https://jsfiddle.net/AlexanderT/bmuwLfqr/

На этом все. Если у вас есть какие-то вопросы — пишите комментарии и поделитесь статьей, если вам понравилось!

Как сделать хлебные крошки на сайте с помощью CSS от bologer