道路標識 (先端のある長方形) の形のボタンを作成したいと考えています。
リーリー各テキストの長さが異なるテキストを動的にロゴに書き込みたいと考えています。 グラフィックのみを背景グラフィックとして使用してこれを試してみると、矢印はそれに応じて拡大縮小および圧縮/伸縮されます。 したがって、テキストを通常の div に配置し、CSS :after を使用して矢印を SVG として追加します。 矢印は完全に塗りつぶされているはずです。つまり、フレームの問題に対処する必要はありません。 (視認性を高めるために SVG を黒のままにしました) 最初の問題は、矢印が常にブロック內(nèi)にあり、ブロックの後ろにないことです。私はposition:absolute;を使用してこの問題を解決しました。しかし、左: と右: ブロックの端に基づいて配置できなかったため、さらなる微調(diào)整は失敗しました。
質(zhì)問:###
A Haworth 氏が述べたように、クリッピング パスはもっと単純になる可能性があります。これを行うには、ボタンの右側(cè)に padding
を追加して、矢印があるべき場所に常にスペースを殘し、要素全體に clip-path
を追加します。