FigmaではStroke（枠線）にグラデーションを付けたり、重ね掛けしたりすることができます。
しかし、CSSの border ではグラデーションが利用できません。border-image ではグラデーションの重ね掛けや border-radius との組み合わせができません。
対処法のひとつとして「グラデーションの塗り」と「背景色と同一の塗り」を組み合わせてごまかす方法がありますが、背景を透明にしたいときこの方法が使えません。
そこで、この記事では「デザインデータから枠線画像を書き出してborder-imageで実装する方法」を説明します。
背景透明×グラデーション×角丸を、border-imageで実装する
今回実装するデザインがこちら。
STEP1. 画像素材を作る
まずはFigma上で、枠線のみのオブジェクトを用意します。
これを x1 で透過PNGとして書き出します。
※ この記事では、話を簡単にするために x1 にします。x2の場合は、 CSSで指定する数値が変化します。
以下の画像が実際に書き出したものです
STEP2. border-imageをCSSで書く
例えば角丸サイズが8pxの今回の枠線の場合は、以下のようなCSSになります。
border-image: url(frame.png) 8 / 8px stretch;- url(frame.png)：画像URL
- 8：画像内での角のサイズ
- 8px：角を何pxで描画するか
- stretch：線の部分をどう描画するか
【補足】 x2 のサイズで書き出した場合
枠線画像を2倍で書き出して利用するときは、「画像内での角のサイズ」は2倍で16、「角を何pxで描画するか」は8pxのままとなります。
border-image: url(frame.png) 16 / 8px stretch;STEP3. 要素のスタイルを調整する
例えば以下のような感じで要素のスタイルを整えたら完成です！
border-image: url(frame.png) 8 / 8px stretch;
border: solid 2px;
display: inline-block;
padding: 8px 16px;
background: transparent;
color: #FED457;
text-decoration: none;なお border: solid 2px; は、ボックスのサイズの計算に見かけの線幅を使うために設定しています。（見た目の線はborder-image が優先して適用されます）
まとめ
CSSでは実装ができなさそうな枠線デザインがでてきたら、もしかしたら border-image で実装できるかも。
今回の記事では基本の形のみ紹介しましたが、 border-image: url(ribbon.svg) 30 80 30 80 fill / 30px 80px 30px 80px stretch; のような、より複雑な指定をすると表現の幅がひろがります。
まずは基本の形から、border-image の力を試してみてくださいね。
参考：border-image – CSS: カスケーディングスタイルシート | MDN
基本の形
border-image: url(frame.png) 8 / 8px stretch;- url(frame.png)：画像URL
- 8：画像内での角のサイズ
- 8px：角を何pxで描画するか
- stretch：線の部分をどう描画するか
コメント