CSS breadcrumbs avec clip-path - besoin de coordonnées "négatives"

Question

J'essaie de faire un chemin de fil d'Ariane en utilisant 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>

qui donne

Alors que j'aime la simplicité de cette méthode, le problème vient des coordonnées 90%, qui sont par rapport à la longueur du mot . Ainsi "bienvenue!" n'a pas le même angle de flèche que "minuscule".

Bien sûr, je pourrais ajouter deux blocs vierges entre les mots qui colleraient aux travées précédentes et suivantes, en forme si nécessaire.

Mais est-il un moyen de spécifier quelque chose comme la « géométrie » coordonnées style de X-Windows pour un polygon, quelque chose comme -10px (qui compterait de la droite/bas d'un élément, donc pour un élément 100px, que donnerait 90px, ce qui signifie 10px du côté opposé d'un élément)?

Ainsi, la règle, « géométrie » comme, serait quelque chose comme (ce qui ne fonctionne pas dans css, puisque compte -10px de la gauche/haut)

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

Answer 1

Pourquoi ne pas en utilisant calc et vous essayez (100% - 10px). Il se comporte comme un négatif de coordonnées pour le droit de l'élément:

#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>