CSSのclip-pathで画像クリッピング

2023年3月24日

CSSのclip-pathを使用することで画像を三角形や多角形など様々な形状にクリッピングできます。
これによりデザインに幅広い表現が可能になります。

画像クリッピングDEMO

まずは実装内容を確認しましょう、DEMOページをご覧ください。

See the Pen Image Clipping by SOLLUNA (@ygi) on CodePen.

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

circle()半径と中心位置を使用して円を定義します。
circle(50% at 50% 50%)半径が要素の50%であり、要素の中心(50%、50%)に位置する円形のクリップパスを作成します。

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

polygon()SVGの塗りつぶし規則と頂点のセットを用いて多角形を定義します。
polygon(50% 0%, 0% 100%, 100% 100%)は、3つの座標を使用してポリゴンのクリップパスを定義します。上向き三角形になります。

.rectangle {
      clip-path: inset(0% 0% 0% 0%);
    }

inset()内部の長方形を定義します。
inset(0% 0% 0% 0%)は、上、右、下、左のオフセットが0%である矩形のクリップパスを作成します。

.pentagonal {
      clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    }

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

.octagonal {
      clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    }

.decagonal {
      clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 65%, 80% 90%, 50% 100%, 20% 90%, 0% 65%, 0% 35%, 20% 10%);
    }

.star {
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    }

clip-pathrで斜め背景を実装する

SOLLUNAブログ WEB制作

斜め背景を実装方法CSSのclip-path | SOLLUNAブログ WEB制作 CSSのclip-pathで実装可能な、背景を斜めにする方法をご紹介します。斜め背景DEMO まずは実装内容を確認しましょう、DEMOページをご覧ください。 DEMO See the Pen Untitl…

よかったらシェアお願いします！