<div class="bar">

  <div class="chevron">
    CSS
  </div>
  <div class="chevron">
    Chevron
  </div>
  <div class="chevron">
    Separator
  </div>

</div>

/* Supports background, border, and custom angles */

:root {
  --bg: black;
  --color: white;
  
  --chevron-angle: 30deg;
  --chevron-border: 2px solid var(--color);
}

.chevron {
  position: relative;
  padding: 0.5rem 1.5rem;

  &::before,
  &::after {
    content: "";
    position: absolute;
    right: 0;
    height: 50%;
    z-index: -1;
    border-right: var(--chevron-border);
  }
  
  &::before {
    top: 0;
    transform: skewX(var(--chevron-angle));
  }
  
  &::after {
    bottom: 0;
    transform: skewX(calc(var(--chevron-angle) * -1));
  }
  
  /* Hide the last separator */
  &:last-of-type::before,
  &:last-of-type::after {
    display: none;
  }
}

/* Demo only */

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  font: 16px/1.5 system-ui, sans-serif;
  margin: 0;
  padding: 0;
  color: var(--color);
  background: var(--bg);
}

.bar {
  display: flex;
  border: var(--chevron-border);
  border-radius: 2rem;
}