JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<div class="wrap">
  <a href="#" class="complete">
    test
  </a>
  <a href="#" class="complete">
    test long name here
  </a><a href="#">
    test
  </a><a href="#">
    test
  </a>
  <a href="#">
    test
  </a>
</div>

SCSS

.wrap {
  background: #0072ba;
  padding: .5rem;
  display: flex;
  justify-content: center;
  
  a:link,
  a:visited {
    display: inline-block;
    text-decoration: none;
    color: #222;
    padding: 5px 1em;
    position: relative;
    background: #fff;
    overflow: hidden;
    margin-right: -4px;
    clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 50%, calc(100% - 5px) 100%, 0 100%, 5px 50%, 0 0);
  }
  
  a:hover {
    background: tomato;
    color: #fff;
  }
  
  a:first-of-type {
    border-radius: 50px 0 0 50px;
    clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 50%, calc(100% - 5px) 100%, 0 100%);
  }
  
  a:last-of-type {
    border-radius: 0 50px 50px 0;
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 5px 50%, 0 0);
    .chevron {
      display: none;
    }
  }
  
  a.complete {
    background: #222;
    color: #fff;
    &:hover {
      background: #000;
    }
  }
}

body {
  font-family: sans-serif;
}