JSFiddle - React, Tailwind, and code Playground

by Sergey Goryachev

HTML

<ul class="breadcrumbs">
  <li class="breadcrumbs__item">
    <a href="#" class="breadcrumbs__link">Главная</a>
  </li>
  <li class="breadcrumbs__item">
    <a href="#" class="breadcrumbs__link">Каталог</a>
  </li>
  <li class="breadcrumbs__item">
    <a href="#" class="breadcrumbs__link">Товар</a>
  </li>
</ul>

CSS

* { margin: 0; padding: 0; list-style: none; }

.breadcrumbs {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  align-content: flex-start;
  padding: 20px;
}

.breadcrumbs__item {
  position: relative;
}
.breadcrumbs__item:before,
.breadcrumbs__item:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  left: 0;
}
.breadcrumbs__item:before {
  border-width: 0 10px 20px 0;
  border-color: transparent #009DE0 transparent transparent;
}
.breadcrumbs__item:after {
  border-width: 0 0 20px 10px;
  border-color: transparent transparent #009DE0 transparent;
  bottom: 0;
}

.breadcrumbs__link {
  position: relative;
  background: #009DE0;
  line-height: 40px;
  display: block;
  font-family: arial;
  font-size: 14px;
  color: #ffffff;
  text-decoration: none;
  padding: 0 10px;
  margin: 0 10px;
}
.breadcrumbs__link:before,
.breadcrumbs__link:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  right: -10px;
}
.breadcrumbs__link:before {
  border-width: 20px 0 0 10px;
  border-color: transparent transparent transparent #009DE0;
}
.breadcrumbs__link:after {
  border-width: 20px 10px 0 0;
  border-color: #009DE0 transparent transparent transparent;
  bottom: 0;
}
.breadcrumbs__item:hover .breadcrumbs__link {
  background: orange;
}
.breadcrumbs__item:hover:before {
  border-color: transparent orange transparent transparent;
}
.breadcrumbs__item:hover:after {
  border-color: transparent transparent orange transparent;
}
.breadcrumbs__item:hover .breadcrumbs__link:before {
  border-color: transparent transparent transparent orange;
}
.breadcrumbs__item:hover .breadcrumbs__link:after {
  border-color: orange transparent transparent transparent;
}