clip-pathを使用したCSSのパンくずリスト - "負の"座標の必要

Question

clip-pathを使用してパンくずらんだパスを作成しようとしています。私はその方法の単純さを気に入っているが、問題は、単語の長さに対して相対的座標90%、から来る

を

を与える

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

。したがって、「歓迎！」 「小さい」と同じ矢印の角度を持っていません。

もちろん、必要に応じて前後のスパンに固執する単語の間に2つの空白ブロックを追加できます。

のような "geometry"座標スタイルのようなものを指定する方法があります。これは-10pxのようなものです（これは要素の右/下から数えます;したがって100px要素の場合は要素の反対側から10pxを意味する90pxを与えるでしょうか？）

このように、ルールは、「幾何学」のように、（左/上から-10pxカウントするので、CSSで動作しません）のようなもの

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

Answer 1

になり、なぜカルクを使用していません試してみてください（100％〜10px）。 /前：要素の後になります、私はそれが問題とは何の関係もありませんが、と解決策を知っている

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