CSS breadcrumbs with clip-path - need of "negative" coordinates

Question

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 100px element, that would give 90px, meaning 10px from the opposite side of an element )?

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

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

Answer 1

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>