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%);