見出し画像

Text Crop と SVG arrow [ codepen: css ]

SVG の矢印付きリンクボタン実装例です。SVG は <use xlink:href="***"> で使い回せるように実装。普通に実装しようとすると文字要素自体が持つ上下余白がじゃまになったりするので :before:after を使って上下余白を調整。これを Text Crop と呼んでます。

↓ここで知りました。

中の文字が動的に代わり、行数も変わるようなパターンの場合に非常に便利です。また、行間調整をした場合の上下余白調整も非常にやりやすいです。

矢印の SVG コードは↓こんな感じ。

polyline(points="0.5,5.5 17.5,5.5 12.5,0.5 ")

この形式が一番軽量だと思われる。スタイルは CSS で↓こんな感じに。

fill:none;
stroke:#000000;
stroke-linecap:square;
stroke-linejoin:bevel;
stroke-miterlimit:10;

↓実装例です。


この記事が気に入ったらサポートをしてみませんか?