Breadcrumbs

<div class="categories-container">
  <div class="main-category">
    Main category
  </div>

  <div class="sub-category">
    Sub category 1 Sub category 1
  </div>

  <div class="sub-category">
    Sub category 2
  </div>

  <div class="sub-category">
    Sub category 2
  </div>

  <div class="sub-category">
    Sub category 2
  </div>

  <div class="sub-category">
    Sub category 2
  </div>

  <div class="sub-category">
    Sub category 2
  </div>

  <div class="sub-category">
    Sub category 2
  </div>
</div>

-------------

:root {
  --bg-color: #f7f7fa;
  --main-category-color: #4b4b4b;
  --sub-category-color: #7a7a7a;
  --item-gap: 3px;
  --skew-position-offset: 24px;
  --main-category-divider: calc(var(--item-gap) + 2px);
}

@mixin breadcrumb-base {
  position: relative;
  padding: 10px 15px;
  font-size: 20px;
  position: relative;
  background: var(--bg-color);
  border-radius: 5px;
  margin-right: var(--item-gap);
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  color: var(--main-category-color);
}

@mixin breadcrumb-skew {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: var(--bg-color);
  transform-origin: bottom left;
  transform: skew(-30deg, 0deg);
  border-radius: 5px;
}

.categories-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--item-gap) 0;

  .main-category {
    @include breadcrumb-base;

    margin-right: calc(
      var(--skew-position-offset) + var(--main-category-divider)
    );

    &::after {
      content: "";
      @include breadcrumb-skew;
    }
  }

  .sub-category {
    @include breadcrumb-base;

    color: var(--sub-category-color);

    &:nth-of-type(1) {
      margin-right: 30px;
    }

    &:nth-of-type(2) {
      &::before {
        content: "";

        @include breadcrumb-skew;
        left: calc(-1 * var(--skew-position-offset));
      }
    }
  }
}