clip-path
を使用してパンくずらんだパスを作成しようとしています。私はその方法の単純さを気に入っているが、問題は、単語の長さに対して相対的座標90%
、から来るclip-pathを使用したCSSのパンくずリスト - "負の"座標の必要
を与える
#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%);
:それは要素の右座標負のように動作しますあなたのための代替?またはあなたはそれを行う方法を知っていますが、あなたはクリップパスでどのように見える必要がありますか? –
''( '最も近い側'または '最も遠い側')またはSVG 'clip-path:url(#svgID);'を使用してみましたか? –
Krusader
@ Krusader私はSVGソリューションを避けることを好む - 「塗りつぶしルール」については、この場合どのように使用しますか? –