<!-- It's only about creating the shapes. Use the appropriate HTML code for your specific use case. -->
<div class="container">
  <div class="breadcrumb">Item 1</div>
  <div class="breadcrumb">Item 2</div>
  <div class="breadcrumb">Item 3</div>
</div>
<div class="container" style="gap: .75em;--b:8px;--a:30deg;--c: #E97F02;">
  <div class="breadcrumb">A1</div>
  <div class="breadcrumb">B2</div>
  <div class="breadcrumb">C3</div>
  <div class="breadcrumb">D4</div>
  <div class="breadcrumb">E5</div>
</div>

<div class="container last" style="gap: .75em;--b:3px;--a:50deg;--c: #C02942;">
  <div class="breadcrumb">One</div>
  <div class="breadcrumb">Two</div>
  <div class="breadcrumb">Three</div>
</div>

.container {
  --b: 5px;   /* the border thickness */
  --a: 40deg;  /* control the shape */
  --c: #64908A;
  
  display: flex;
  color: var(--c);
}
.breadcrumb {
  position: relative;
  line-height: 1.65; /* control the height, don't use padding ! */
  padding-inline: calc(.5lh*tan(var(--a)) + var(--b)/cos(var(--a)));
  margin-inline-start: calc(-.5lh*tan(var(--a)) - var(--b)/cos(var(--a)));
  text-indent: .1em;
}
.breadcrumb:before {
  content:"";
  position: absolute;
  inset: 0;
  background: var(--c); /* or CurrentColor */
  clip-path: polygon(0 0,calc(100% - .5lh*tan(var(--a))) 0,100% 50%,calc(100% - .5lh*tan(var(--a))) 100%,0 100%,calc(.5lh*tan(var(--a))) 50%,0 0,calc(var(--b)*(tan(var(--a)) + 1/cos(var(--a)))) var(--b), calc(.5lh*tan(var(--a)) + var(--b)/cos(var(--a))) 50%,calc(var(--b)*(tan(var(--a)) + 1/cos(var(--a)))) calc(100% - var(--b)),calc(100% - .5lh*tan(var(--a)) - var(--b)*(1/cos(var(--a)) - tan(var(--a)))) calc(100% - var(--b)),calc(100% - var(--b)/cos(var(--a))) 50%,calc(100% - .5lh*tan(var(--a)) - var(--b)*(1/cos(var(--a)) - tan(var(--a)))) var(--b),calc(var(--b)*(tan(var(--a)) + cos(var(--a)))) var(--b))
}
.breadcrumb:first-child {
  text-indent: 0;
  padding-inline-start: calc(var(--b) + .2em);
}
.breadcrumb:first-child:before {
  clip-path: polygon(0 0,calc(100% - .5lh*tan(var(--a))) 0,100% 50%,calc(100% - .5lh*tan(var(--a))) 100%,0 100%,0 0,var(--b) var(--b),var(--b) calc(100% - var(--b)),calc(100% - .5lh*tan(var(--a)) - var(--b)*(1/cos(var(--a)) - tan(var(--a)))) calc(100% - var(--b)),calc(100% - var(--b)/cos(var(--a))) 50%,calc(100% - .5lh*tan(var(--a)) - var(--b)*(1/cos(var(--a)) - tan(var(--a)))) var(--b),var(--b) var(--b)) 
}
.last .breadcrumb:last-child {
  margin-inline-end: 0;
  padding-inline-end: calc(var(--b) + .2em);
}
.last .breadcrumb:last-child:before {
  clip-path: polygon(0 0,100% 0,100% 50%,100% 100%,0 100%,calc(.5lh*tan(var(--a))) 50%,0 0,calc(var(--b)*(tan(var(--a)) + 1/cos(var(--a)))) var(--b), calc(.5lh*tan(var(--a)) + var(--b)/cos(var(--a))) 50%,calc(var(--b)*(tan(var(--a)) + 1/cos(var(--a)))) calc(100% - var(--b)),calc(100% - var(--b)) calc(100% - var(--b)),calc(100% - var(--b)) var(--b),calc(var(--b)*(tan(var(--a)) + cos(var(--a)))) var(--b))
}


body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  place-items: center;
  gap: 20px;
  font-family: system-ui,sans-serif;
  font-size: 40px;
  font-weight: bold;
  background: repeating-linear-gradient(-45deg,#fff 0 20px,#f8f8f8 0 40px);
}