Widely available 安心して使用可能。主要ブラウザで広くサポートされている。
エフェクト Widely available

clip-path

clip-path プロパティで circle・ellipse・polygon・path などの図形を指定し、要素の表示領域をクリッピングする。複雑な形状のUIや画像トリミング、ホバーで形状が変化するアニメーションなどが実現できる。SVGのclipPathをURLで参照することも可能。

エフェクトマスク

概要

clip-path プロパティで circle・ellipse・polygon・path などの図形を指定し、要素の表示領域をクリッピングする。複雑な形状のUIや画像トリミング、ホバーで形状が変化するアニメーションなどが実現できる。SVGのclipPathをURLで参照することも可能。

対応ブラウザ

デスクトップ

Chrome 88+
Edge 88+
Safari 13.1+
Firefox 71+

モバイル

Chrome Android 88+
Safari iOS 13+
Firefox Android 79+

基本構文

CSS 
.hexagon {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.circle-crop {
  clip-path: circle(50% at center);
}

.reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.5s ease;
}

.reveal:hover {
  clip-path: inset(0 0 0 0);
}

実務での使いどころ

  • 図形切り抜き

    画像やカードを六角形・円形・星形などの形状に切り抜いて表示する。

  • クリッピングアニメーション

    clip-path をアニメーションさせて、要素の表示領域を動的に変化させるワイプ効果。

注意点

  • clip-path で切り抜かれた領域外のコンテンツはクリックやホバーイベントも受け取れない。
  • polygon の頂点数が異なるとアニメーション間の補間ができない。

アクセシビリティ

  • clip-path で視覚的に隠されたコンテンツもスクリーンリーダーには読み上げられる。意図しない場合は aria-hidden を併用する。

参考リンク