CSS clip-pathジェネレーター

CSSのclip-path形状を作成します。ドラッグできる点とプリセット付きの多角形、円、楕円、角丸付きのinsetに対応。ライブプレビューでコードをコピーできます。

形状

プリセット

形状の設定

プレビューのハンドルをドラッグするか、正確な値を入力してください。

切り取られた部分を表示

プレビュー

CSS コード

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

クリップパスジェネレーターとは？

clip-path の形状を視覚的に描きます。多角形は、プレビュー内で点をドラッグするか、パーセントを正確に入力して編集でき、三角形から星、吹き出しまでのプリセットがあります。円、楕円、insetはスライダーで設定します。

クリップパスジェネレーターの使い方

形状（多角形、円、楕円、inset）を選びます。
多角形ではプリセットを選び、ハンドルをドラッグするか、各点のX/Yのパーセントを入力します。点を追加 / 点を削除も使えます。
円と楕円では半径と中心を設定します。insetでは、上、右、下、左と、任意の角の半径を設定します。
切り取られた部分を表示を切り替えて、何が切り取られるかを確認します。
CSSコードをコピーします。

例

入力

Hexagon preset with point 1 moved to X 20%

出力

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

クリップパスジェネレーターを使うべき場面

clip-pathは、装飾的な画像の形、斜めのセクションの縁、六角形のアバター、表示アニメーションに使います（clip-pathは、点の数が同じ形状どうしならアニメーションできます）。形状の外側のコンテンツは隠れ、クリックも受け付けません。角丸の長方形にはborder-radiusを、テキストを回り込ませたい形状には shape-outside を使ってください。

クリップパスジェネレーターの仕組み

座標は、要素のボーダーボックスに対するパーセントで、左上の角から測ります。多角形は点の順に polygon(x% y%, …)、円は circle(r% at x% y%)、楕円は ellipse(rx% ry% at x% y%)、insetは inset(top right bottom left round r)（4つのオフセットはmarginの省略記法のように短縮）で書かれます。点を追加は、選択した点と次の点の中間に新しい点を挿入します。