Используя приведённый код HTML, добавьте к нему стили, чтобы получить результат, показанный на рис. 1.
Рис. 1
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Хлебные крошки</title>
</head>
<body>
<nav aria-label="Хлебные крошки">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#"><img src="image/home.svg" width="20" height="20" alt="Главная"></a></li>
<li class="breadcrumb-item"><a href="#">Инструмент</a></li>
<li class="breadcrumb-item"><a href="#">Аккумуляторный инструмент</a></li>
<li class="breadcrumb-item is-active" aria-current="page"><span>Перфораторы</span></li>
</ol>
</nav>
</body>
</html>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Хлебные крошки</title>
<style>
.breadcrumb {
margin: 0; padding: 0;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
display: inline-flex;
align-items: center;
border-radius: 30px;
overflow: hidden;
margin-top: 2rem;
}
.breadcrumb-item {
position: relative;
white-space: nowrap;
}
.breadcrumb-item:nth-child(4) {
left: calc(-6 * 26px);
z-index: 1;
}
.breadcrumb-item:nth-child(3) {
left: calc(-4 * 26px);
z-index: 2;
}
.breadcrumb-item:nth-child(2) {
left: calc(-2 * 26px);
z-index: 3;
}
.breadcrumb-item:nth-child(1) {
z-index: 4;
}
.breadcrumb-item:first-child > a {
width: 20px; height: 20px;
padding: 1rem;
}
.breadcrumb-item > a,
.breadcrumb-item > span {
display: block;
padding: 1rem 1rem 1rem 4rem;
background-color: #d9d9d9;
border-radius: 30px;
box-shadow: 3px 0 5px rgb(0 0 0 / 40%);
}
.breadcrumb-item > a,
.breadcrumb-item > a:visited {
color: #6f6f6f;
text-decoration: none;
}
.breadcrumb-item > a:hover {
background-color: #cf2d7b;
color: #fff;
}
.breadcrumb-item:first-child > a:hover img {
filter: invert(1);
}
.breadcrumb-item.is-active > span {
background-color: #385434;
color: #f2ffed;
}
</style>
</head>
<body>
<nav aria-label="Хлебные крошки">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#"><img src="image/home.svg" width="20" height="20" alt="Главная"></a></li>
<li class="breadcrumb-item"><a href="#">Инструмент</a></li>
<li class="breadcrumb-item"><a href="#">Аккумуляторный инструмент</a></li>
<li class="breadcrumb-item is-active" aria-current="page"><span>Перфораторы</span></li>
</ol>
</nav>
</body>
</html>