CSS clip-pathジェネレーター

CSS clip-pathジェネレーターの使い方

1. 図形タイプを選択する

「図形タイプ」から、Polygon（多角形）・Circle（円）・Ellipse（楕円）・Inset（矩形）のいずれかを選択します。

自由な形状を作成したい場合はPolygonがおすすめです。
Polygonでは、三角形・星形・矢印などのプリセットを選んで編集を始めることもできます。

2. 図形を調整する

Polygonでは、プレビューに表示された番号付きの頂点をドラッグするか、「頂点の座標」でX・Yの値を入力して形状を調整します。頂点の追加や削除も可能です。

「頂点の移動単位（刻み幅）」では、頂点を移動させるときの間隔を0.1%・1%・5%・10%から選択できます。

Circleでは半径と中心位置、Ellipseでは横半径・縦半径と中心位置、Insetでは上下左右の切り抜き量と角の丸みを調整します。

3. プレビューで確認する

設定の変更はプレビューにリアルタイムで反映されます。Polygonでは、プレビュー下の「頂点を表示」チェックボックスで頂点番号の表示・非表示を切り替えられます。

4. 必要に応じて背景を設定する

「背景の設定」をONにすると、単色・グラデーション・画像から背景タイプを選択できます。設定した背景はプレビューへ反映され、生成されるCSSにもbackgroundプロパティが追加されます。

背景タイプで「画像」を選択すると、アップロードした画像を背景に設定できます。
backgroundプロパティのurl()にはファイル名のみ反映されるので、ご自身のプロジェクトに合わせてファイルパスを変更してください。

5. 詳細設定を変更する

「詳細設定」を開くと、生成するCSSのクラス名を変更できます。

必要な場合は「-webkit-clip-pathを含める」にチェックを入れて、ベンダープレフィックス付きのプロパティも出力できます。

6. CSSをコピーする

調整した内容に合わせて、クラス名を含むCSSコードが自動生成されます。「コピーする」ボタンでコードをコピーし、ご自身のプロジェクトに適用してください。

設定を最初の状態に戻す場合は、「リセット」ボタンを使用します。

clip-pathとは？

clip-pathは、HTML要素や画像の表示範囲を指定して、円形や多角形などの形に切り抜くことができるCSSプロパティです。

要素そのもののサイズを変更するのではなく、指定した範囲の内側だけを表示し、外側を非表示にします。

画像を円形に切り抜いたり、三角形・星形・矢印などの図形を作成したり、Webデザインの装飾としてさまざまな形状を表現できます。

このジェネレーターでは、以下の4種類の図形を作成できます。

polygon()

複数の頂点を指定して、自由な多角形を作成できます。

三角形・五角形・星形・矢印など、直線で構成されたさまざまな図形を作成できます。

プレビュー上の頂点をドラッグすることで形状を調整できるほか、X・Y座標を数値で指定して細かく調整することもできます。

polygon()では、各頂点の位置をX座標とY座標の組み合わせで指定します。

たとえば、

clip-path: polygon(
  50% 0%,
  100% 100%,
  0% 100%
);

では、

• 50% 0%：上辺の中央
• 100% 100%：右下
• 0% 100%：左下

の3点を結び、三角形を作成しています。

X座標は左から右、Y座標は上から下に向かって大きくなります。

%で指定すると要素の大きさに合わせて座標も変化するため、レスポンシブなレイアウトでも使いやすくなります。

circle()

円形に切り抜くことができます。

円の大きさと中心位置を調整できるため、画像の特定の位置を中心に円形で切り抜きたい場合にも利用できます。

ellipse()

楕円形に切り抜くことができます。

横方向と縦方向の半径を個別に設定できるため、横長・縦長の楕円を自由に作成できます。

inset()

上下左右から表示範囲を内側へ縮めて、四角形に切り抜くことができます。

角丸も指定できるため、通常の長方形だけでなく、角の丸いカードのような形状も作成できます。

FAQ