HTML、CSS、SVG を使用してスケーラブルな標識を作成する

Question

道路標識 (先端のある長方形) の形のボタンを作成したいと考えています。

リーリー

各テキストの長さが異なるテキストを動的にロゴに書き込みたいと考えています。 グラフィックのみを背景グラフィックとして使用してこれを試してみると、矢印はそれに応じて拡大縮小および圧縮/伸縮されます。 したがって、テキストを通常の div に配置し、CSS :after を使用して矢印を SVG として追加します。 矢印は完全に塗りつぶされているはずです。つまり、フレームの問題に対処する必要はありません。 (視認性を高めるために SVG を黒のままにしました) 最初の問題は、矢印が常にブロック内にあり、ブロックの後ろにないことです。私はposition:absolute;を使用してこの問題を解決しました。しかし、左: と右: ブロックの端に基づいて配置できなかったため、さらなる微調整は失敗しました。

質問：＃＃＃

• 三角形が常にボックスの端に正確に接続されるように配置するにはどうすればよいですか。 (真ん中に白はありません)

• ボックスのサイズ (高さ) に基づいて SVG を拡大縮小する方法。 (エッジがフィットするように) (おそらくパディングも考慮に入れます)

それとも、後のアプローチでは完全に間違った方向に進んでいますか。HTMLのテキストの後に矢印を（SVGファイルとして）直接追加し（テキストは で囲まれています）、すべてを で囲む必要がありますか？しかし、実際にはこれを避けたいので、CSS経由で挿入する方が良いでしょう。しかし、これがより便利な方法であれば、私はそれで構いません。

リーリー リーリー

Answer 1

A Haworth 氏が述べたように、クリッピング パスはもっと単純になる可能性があります。これを行うには、ボタンの右側に padding を追加して、矢印があるべき場所に常にスペースを残し、要素全体に clip-path を追加します。

リーリー リーリー