CSS оформление хлебных крошек

nav { 
  display: flex; 
} 
 
a { 
  background: linear-gradient(to right, red, #ff5f4d); 
  color: white; 
  text-decoration: none; 
  padding: 5px 35px; 
  height: 20px; 
  min-width: 100px; 
  display: inline-block; 
  text-align: center; 
  position: relative; 
} 
 
a::after { 
  content: ''; 
  display: block; 
  position: absolute; 
  border: 15px solid transparent; 
  border-left: 20px solid #ff5f4d; 
  right: -35px; 
  top: 0; 
  z-index: 50; 
} 
 
a::before { 
  content: ''; 
  display: block; 
  position: absolute; 
  border: 18px solid transparent; 
  border-left: 23px solid white; 
  right: -42px; 
  top: -3px; 
  z-index: 40; 
}

<nav> 
  <a href="">Главная</a> 
  <a href="">Каталог</a> 
  <a href="">Очень длинное название</a> 
</nav>

.breadcrumbs { 
  color: #fff; 
  font: bold 12px verdana, sans-serif; 
  background: #FAF8FB; 
  padding: 10px 20px 10px 10px; 
  position: relative; 
  display: inline-block; 
} 
.breadcrumbs div { 
  float: left; 
  background: linear-gradient(to right, #A82229, #EE3844); 
  padding: 6px 16px 6px 26px; 
  text-align: center; 
  position: relative; 
  border: 2px solid #FAF8FB; 
} 
.breadcrumbs div:first-child { 
  background: #DAD8D9; 
  color: #333; 
} 
.breadcrumbs span { 
  clear: both; 
  display: block; 
} 
.breadcrumbs div:after { 
  width: 19px; 
  height: 19px; 
  content: ''; 
  position: absolute; 
  transform: rotate(45deg); 
  right: -10px; 
  top: 4px; 
  background: #EA3743; 
  z-index: 2; 
  box-shadow: 2px -2px 0 #FAF8FB 
} 
.breadcrumbs div:first-child:after { 
  background: #DAD8D9; 
}

<div class="breadcrumbs"> 
  <div>Главная</div> 
  <div>Каталог товаров</div> 
  <div>Компьютеры</div> 
  <span></span> 
</div>

breadcrumbs a { 
    font-family: arial, sans-serif; 
    font-weight: bold; 
    display: inline-block; 
    height: 30px; 
    line-height: 30px;  
    padding: 0 10px; 
    outline: none; 
    cursor: default; 
    color: snow; 
  
    margin-right: -11px; 
    border-left: 10px solid white; 
    border-right: 10px solid white; 
    border-image: url("data:image/svg+xml;utf8,\ 
      <svg width='130px' height='30px' xmlns='http://www.w3.org/2000/svg'>\ 
        <defs><linearGradient id='grad'>\ 
          <stop offset='0%' stop-color='%23aa2222'></stop>\ 
          <stop offset='100%' stop-color='red'></stop>\ 
        </linearGradient></defs>\ 
        <path d='M1,1 h118 l10,14 l-10,14 h-118 l10,-14 z' fill='url(%23grad)'/>\ 
      </svg>"); 
    border-image-slice: 0 11 0 11 fill; 
} 
 
breadcrumbs a.active { 
    border-image: url("data:image/svg+xml;utf8,\ 
      <svg width='30px' height='30px' xmlns='http://www.w3.org/2000/svg'>\ 
        <path d='M1,1 h18 l10,14 l-10,14 h-18 l10,-14 z' fill='lightgray'/>\ 
      </svg>");  
    border-image-slice: 0 11 0 11 fill; 
    color: black; 
} 
 
body { 
  background: linear-gradient(to bottom, wheat, white) no-repeat; 
}

<breadcrumbs> 
  <a class="active">Главная</a> 
  <a>Каталог товаров</a> 
  <a>Компьютеры</a> 
</breadcrumbs>