JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div id="app">
  <div class="crumbs">
    <div
      v-for="(item, index) in items"
      :key="item"
      class="crumbs__item-wrapper"
      :class="{ [`-${item}`]: true }"
    >
      <div
        class="crumbs__item"
        :class="{ [`-${item}`]: true }"
      >{{ item }}</div>
    </div>
  </div>
</div>

SCSS

* {
  box-sizing: border-box;
}

html {
  font-size: 10px
}

body {
  font-size: 1.6rem;
  background: #ccc;
  font-family: sans-serif;
}

.crumbs {
  display: flex;
  overflow: auto;
 
  &__item-wrapper {
    height: 3rem;
    &.-red {
      background-image: linear-gradient(90deg, red, darken(red, 30%));
    }
    &.-blue {
      background-image: linear-gradient(90deg, blue, darken(blue, 30%));
    }
    &.-green {
      background-image: linear-gradient(90deg, green, darken(green, 30%));
    }
    &.-violet {
      background-image: linear-gradient(90deg, violet, darken(violet, 30%));
    }
    &.-pink {
      background-image: linear-gradient(90deg, pink, darken(pink, 30%));
    }
    &.-cyan {
      background-image: linear-gradient(90deg, cyan, darken(cyan, 30%));
    }
    &.-orange {
      background-image: linear-gradient(90deg, orange, darken(orange, 30%));
    }
  }
 
  &__item {
    &.-red {
      background-image: linear-gradient(90deg, lighten(red, 30%), red);
    }
    &.-blue {
      background-image: linear-gradient(90deg, lighten(blue, 30%), blue);
    }
    &.-green {
      background-image: linear-gradient(90deg, lighten(green, 30%), green);
    }
    &.-violet {
      background-image: linear-gradient(90deg, lighten(violet, 30%), violet);
    }
    &.-pink {
      background-image: linear-gradient(90deg, lighten(pink, 30%), pink);
    }
    &.-cyan {
      background-image: linear-gradient(90deg, lighten(cyan, 30%), cyan);
    }
    &.-orange {
      background-image: linear-gradient(90deg, lighten(orange, 30%), orange);
    }
  }
  
  &__item-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    min-width: 12rem;
    transition: background .15s;
    background-size: 100%;
    clip-path: polygon(calc(100% - 1.5rem) 0%, 100% 50%, calc(100% - 1.5rem) 100%, 0% 100%, 1.5rem 50%, 0% 0%);
    
    & + & {
      margin-left: calc(-1.5rem - 1px);
    }
    
    &:first-child {
      clip-path:...

Vue

new Vue({
  el: "#app",
  data: () => ({
    items: [
      'red',
      'blue',
      'green',
      'violet',
      'pink', 
      'cyan',
      'orange',
    ]
  })
})