How can I create CSS breadcrumbs with clip-path?

I'm trying to make a breadcrumbs path using clip-path.

#clip span {
  padding: 3px 20px;
  background-color: #666;
  color: white;
  display: inline-block;
  clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%);
}

<div id="clip">
  <span>hello</span><span>tiny</span><span>world</span><span>welcome!</span>
</div>

which gives

While I like the simplicity of that method, the problem comes from the coordinates 90%, which are relative to the length of the word. Thus "welcome!" does not have the same arrow angle as "tiny".

Of course, I could add two blank blocks between the words that would stick to previous and followings spans, shaped as required.

But is there a way to specify something like the "geometry" coordinates style of X-Windows for a polygon, something like -10px (which would count from the right/bottom of an element ; thus for a 100 pixels element, that would give 90 pixels, meaning 10 pixels from the opposite side of an element)?

Thus, the rule, "geometry" like, would be something like (which doesn't work in CSS, since -10 pixels counts from the left/top)

clip-path: polygon(0 0, -10px 0, 100% 50%, -10px 100%, 0 100%, 10px 50%);

I have a detailed article about creating such shapes: How to create Breadcrumb Navigation with CSS

You can try calc and you use something like (100% - 10px). It will behave like a negative coordinate for the right of the element:

#clip span {
  padding: 3px 20px;
  background-color: #666;
  color: white;
  display: inline-block;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
}

<div id="clip">
  <span>hello</span><span>tiny</span><span>world</span><span>welcome!</span>
</div>

I would also suggest to consider other ways more supported.

Using multiple background:

#clip span {
  color: white;
  display: inline-block;
  padding: 3px 20px;
  border-right:10px solid transparent;
  border-left:10px solid transparent;

  background:
    linear-gradient(to top    right,transparent 47%,#666 51%) top left     border-box,
    linear-gradient(to top    left ,transparent 47%,#666 51%) bottom right border-box,
    linear-gradient(to bottom right,transparent 47%,#666 51%) bottom left  border-box,
    linear-gradient(to bottom left ,transparent 47%,#666 51%) top right    border-box,
    #666 padding-box;
  background-size:10px 50%;
  background-repeat:no-repeat;
}

<div id="clip">
  <span>hello</span><span>tiny</span><span>world</span><span>welcome!</span>
</div>

Using pseudo element and skew transformation:

#clip span {
  color: white;
  display: inline-block;
  padding: 3px 15px;
  margin:0 5px;
  position:relative;
  z-index:0;
}
#clip span:before,
#clip span:after {
  content:"";
  position:absolute;
  z-index:-1;
  left:0;
  right:0;
  height:50%;
  background:#666;
}
#clip span:before {
  top:0;
  transform:skewX(45deg);
}
#clip span:after {
  bottom:0;
  transform:skewX(-45deg);
}

<div id="clip">
  <span>hello</span><span>tiny</span><span>world</span><span>welcome!</span>
</div>