⏺️

clip-pathのshapeを使って角丸マスクする

2025/07/07に公開

はじめに

以前、maskプロパティとsvgを組み合わせて角丸部分をマスクするという記事を書きました。

今回はclip-pathプロパティで shape() が使えるようになったそうなのでこちらを使って実装してみました。
https://play.tailwindcss.com/0jA0h8qXVq

使用例として、角丸でくり抜いてそれ以外の部分に background-filter: grayscale(); を適用したりできます。

arc でも同じ形を作ることができますが、指定がシンプルな smooth を使います。

shape() では値にカスタムプロパティを使用することができるので、動的にサイズを指定できます。

Tailwind CSS v4のFunctional Utilitiesではカスタムプロパティにテーマの値をセットするだけなら簡単に実装できてしまいます。

@utility mask-* {
  --size: --value(--radius-*); /* roundedと同じテーマの値を指定できる */
}

/* <div class="mask-4xl"></div>みたいに指定できる */

あとは、各コーナーごとのカスタムプロパティを用意したり個別に指定するためのなんやかんやを実装していくと冒頭の完成版になります。

svg版のほうではfullには auto を設定しておくことで、縦横どちらか小さい方の最大値まで広がってくれたので rounded-full と同じ形の角丸が作成できましたが、shape版では縦横それぞれのサイズが基準になるため％指定では楕円になってしまいます。

svg版と同じように縦横どちらか小さい方の最大値を指定するには、コンテナーコンテキストを宣言した要素の中で 50cqmin を設定します。

（要素のサイズを参照する ew, eh みたいなのが欲しい）