開発 2024.03.07

CSS 要素を切り抜くclip-pathを活用しよう

CSSのプロパティ”clip-path”は、要素のどの部分を表示するかを設定するクリッピング領域を作ります。
具体的には、領域の内部の部分は表示され、外側の部分は非表示になります。

1 基本的な使い方
2 clip-pathで使用できる値と使用例
3 まとめ

基本的な使い方

CSSで”clip-path”プロパティを使って要素に適用します。

.element {
        clip-path: circle(50%);
      }

上記の場合、.element 要素は円形で切り取られます。
左のサンプル画像に上記CSSを適用すると、右のように表示されます。

clip-pathで使用できる値と使用例

clip-pathで使用できる基本シェイプには、以下のような例があります。

circle(radius): 円形に切り抜き、半径を指定
ellipse(radius-x, radius-y): 楕円形に切り抜き、横半径と縦半径を指定
polygon(points): 点を指定して多角形に切り抜き
inset(top, right, bottom, left): 上辺、右辺、下辺、左辺からの距離を指定

clip-path:circleの使用例

clip-path:circleの使用例は冒頭で紹介していますが、切り抜きの基準位置を指定することもできるので、紹介します。
以下のコードをご覧ください。


/* 中央で円形切り抜き（通常） */
.element {
        clip-path: circle(50% at center);
      }

/* 左を基準に円形切り抜き */
.element {
        clip-path: circle(50% at left);
      }

/* 右を基準に円形切り抜き */
.element {
        clip-path: circle(50% at right);
      }

これらを適用したサンプル画像をご覧ください。
at centerは通常の設定、中央を基準に円形に切り抜かれます。
at leftは左端を基準に、at rightは右端を円形に切り抜かれた半円として表示されます。

clip-path:ellipseの使用例

続いて、clip-path:ellipseの使用例を紹介します。
以下のコードをご覧ください。

.element {
        clip-path: ellipse(50% 25%);
      }

これを適用すると、サンプル画像は、以下のように切り抜かれます。

設定値を変更すれば、当然、切り抜きの形状も変わります。
radius-xとradius-yの値を入れ替えてみましょう。

.element {
        clip-path: ellipse(25% 50%);
      }

するとこのように、縦長に切り抜かれます。

clip-path:polygonの使用例

続いて、clip-path:polygonの使用例を紹介します。
同じように、以下のコードをご覧ください。


.element {
        clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 50% 100%, 0% 50%);
      }

これを適用すると、サンプル画像は、以下のように切り抜かれます。

設定値を変更すれば、当然、切り抜きの形状も変わります。

/* 3角形に切り抜く例 */
.element {
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      }
/* 8角形に切り抜く例 */
.element {
        clip-path: polygon(33% 0%, 67% 0%, 100% 33%, 100% 67%, 67% 100%,33% 100%,0% 67%,0% 33%);
      }

すると以下のように3角形や8角形に切り抜くこともできます。

clip-path:insetの使用例

続いて、clip-path:insetの使用例を紹介します。
以下のコードをご覧ください。

/* 左半分を切り抜く例 */
.element {
        clip-path: inset(0 50% 0 0)
    }

/* 左半分を切り抜き、角丸にする例 */

.element {
        clip-path: inset(0 50% 0 0 round 10%)
    }

これを適用すると、サンプル画像は、以下のように切り抜かれます。
あわせて、roundを指定することで角丸にすることもできます。