こんにちは、ユアサです。明けましておめでとうございます。今年もarms inc. Engineers’ Blogをどうぞよろしくお願いします。
今回は要素の角を様々な形に実装できる新しいプロパティcorner-shapeについて紹介していきます。
割と使われている角の作り方
シンプルに角を丸くするのであればborder-radiusで数値指定、形を自由に調整する場合はclip-pathで切り抜くのが主流かと思います。
もちろんこれらで事足りるのですが、特にclip-pathの方はベベルなどの形状を作ろうにも計算や調整に手間がかかります。
これをプロパティ一つで解決できるのが、要素の角の形状を実装できるcorner-shapeプロパティです。
corner-shapeについて
上記でも少し書きましたが、要素の角の形状をこれ一つで実装できるプロパティです。clip-pathほどの自由度はありませんが、角丸やベベル、切り落としなどの汎用的な形状は簡単に実装できます。
Chrome 139でサポートされたばかりなのでかなり新しいです。できれば主要ブラウザは一通り網羅してくれていると嬉しいですが、残念ながらSafariとFirefoxはまだサポートされていないため実用段階ではありません。
しかし使い勝手は良さそうなので注目しておきたいです。
設定できる値は以下の通りです。
- round（角丸）
- scoop（内側への角丸 シャベルで掬って抉ったような形が名称の由来？）
- bevel（ベベル 角を切り落とした形）
- notch（角を四角く抉ったような形）
- square（通常の角）
- squircle（緩やかな角丸）
- superellipse()（括弧内に数値を入力して角丸の具合を調整できる。正数であれば角丸、負数であれば抉るような内側への角丸）
使用例
ほとんどが値をそのまま設定するだけなので特にこれといった解説はないのですが、実装してみるとそれぞれ以下の表示になります。
See the Pen corner_shape_ samples by felly (@felly00505) on CodePen
基本的にcorner-shapeで値を設定し、角の形状の効き具合についてはborder-radiusで調整することになります。
ただし、値の中でもsuperellipse()は少し特殊なので、こちらの挙動について少し紹介します。
superellipse()は括弧内に特定の数字を設定することになりますが、入力する数値が正数であれば外側への角丸、負数であれば抉るような形の内側への角丸になります。また正数・負数の+・-といった記号を抜いた数値が大きくなればなるほど角が鋭利に（正方形に近い形に）なっていきます。
border-radiusの数値に関わらず括弧内の数値で鋭利具合が設定されます。
注意点
形状の効き具合はsuperellipse()を抜けばborder-radiusの数値で自由に調整できますが、数値をあまり大きくしすぎると子要素の描画範囲が枠外へはみ出てしまいます。
また以下のコードを触っていただくと分かるかと思いますが、ホバーの範囲にも影響が出てしまいます。
corner-shapeを付与した要素は表示されている範囲のみでホバーが効きますが、corner-shapeで変化した形状は子要素に影響しないため、結果的に予期しないホバー範囲になってしまうケースがあるため注意が必要です。
See the Pen corner_shape_ samples02 by felly (@felly00505) on CodePen
まとめ
corner-shapeプロパティは要素の角の形状を設定することができ、基本的にこの形状の効き具合はborder-radiusで調整します。ただしsuperellipse()のみは括弧内の数値で効き具合が決定するため注意が必要です。
よくある角の形状はだいたいこのプロパティで実装できそうなので、今回実際に触ってみてclip-pathを使用するより考えることが少なくて便利だなと感じました。
早く主要ブラウザで一通りサポートされるといいですね。
