<nav aria-label="Breadcrumb" class="breadcrumb">
  <ol>
    <li>
      <a href="...">Home</a>
    </li>
    <li>
      <a href="...">Page I</a>
    </li>
    <li>
      <a href="...">Page II</a>
    </li>
    <li>
      <a href="" aria-current="page">Current Page</a>
    </li>
  </ol>
</nav>

.breadcrumb {
  --s: 15px;
}

.breadcrumb ol {
  display: flex;
  list-style: none;
  margin: 20px;
  padding: 0;
  gap: 5px;
}
.breadcrumb ol li {
  clip-path: polygon(0 0,calc(100% - var(--s)) 0,100% 50%,calc(100% - var(--s)) 100%,0 100%,var(--s) 50%);
}
.breadcrumb ol li a { 
  display: block;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  text-decoration: none;
  color: #fff;
  background: #333;
  font-size: 25px;
  font-family: sans-serif;
}
.breadcrumb ol li:last-child a {
  background: #666;
}
.breadcrumb ol li a:focus-visible {
  background: #95c8d9;
}