デザイン · ローカルユーティリティ
CSS Clip Path Generator
ドラッグ、キーボード、座標入力で多角形を編集。4 種類のプリセットから始め、clip-path 宣言や CSS をローカルでコピーできます。
タスクの道筋 / 入力から結果へ
開始する形状を選ぶ
ローカルで実行 · アップロードなし
4 種類の多角形を比較し、ワークスペースで同じ値を設定できます。各プレビューと CSS は同じ多角形を使います。出力されるボックスの初期サイズは 240 × 180 px です。
ワークスペースで設定を調整六角形をチームのアバターや繰り返し並べるバッジに使えます。
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
}傾いたひし形を小さな画像や装飾に使えます。
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(65% 0%, 100% 50%, 35% 100%, 0% 50%);
clip-path: polygon(65% 0%, 100% 50%, 35% 100%, 0% 50%);
}4 頂点の傾いた形をカードの装飾に使えます。
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(18% 0%, 100% 60%, 82% 100%, 0% 40%);
clip-path: polygon(18% 0%, 100% 60%, 82% 100%, 0% 40%);
}バナーの端を次のセクションに向けられます。
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%, 18% 50%);
clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%, 18% 50%);
}上のいずれかの形の CSS の後に、次のルールを追加します。画像のパスと代替テキストは自分のものに置き換えてください。ボックスは 4:3 を保ち、object-fit: cover は画像を引き伸ばさずに切り抜いて満たします。パーセント座標はボックスのサイズに追従します。
<img class="clipped-shape"
src="/your-image.jpg"
alt="画像の説明"
width="240" height="180">.clipped-shape {
display: block;
max-width: 100%;
height: auto;
object-fit: cover;
}4 種類のテンプレートと 2 つのスライダーを利用できます。頂点の自由編集、SVG パスの読み込み、曲線には対応していません。調整したルールはワークスペースの CSS コピーまたは .css ダウンロードで保存できます。
タスクの道筋 / 入力から結果へ
六角形、ひし形、平行四辺形、山形から選びます。2 本のスライダーはプリセットを調整し、個別の頂点を編集するとカスタム多角形になります。
番号付きの頂点をドラッグするか座標を入力します。頂点にフォーカスして矢印キーで 1%、Shift + 矢印キーで 10% 移動します。追加すると選択した頂点と次の頂点の中間に頂点が入ります。
完全なサンプルには選択色、幅 240px、縦横比 4:3 が含まれます。編集領域は画面に合わせて拡縮します。
書き出す前に各辺を確認します。番号付きハンドルは編集用で、CSS には含まれません。
CSS 出力: clip-path 宣言のみ / 完全なサンプル CSS. 完全なサンプルには選択色、幅 240px、縦横比 4:3 が含まれます。編集領域は画面に合わせて拡縮します。
座標は要素に対する割合です。既存のルールに宣言を貼るか、サンプルの .clipped-shape クラスを使い、パソコンとモバイルで確認してください。
CSS clip-path ジェネレーター は検証済みのローカル実行パスを使用し、隠れた入力・出力履歴を作成しません。
現在のブラウザタブ内で実行されます。
使用中のツールデータが Toolars のドキュメントレコードになることはありません。
プロフィールを作成せずにコアワークフローを使えます。お気に入りはログイン後にアカウントへ同期されます。
タブを閉じれば、作業中のデータは消えます。
2026-09-24 のローカルブラウザー検証では、既定の六角形（水平 24%、垂直 50%）から始めました。点 1 を選び、X を 24% から 30% に変更し、色を #ff6600 にします。プレビューは clip-path polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%) のオレンジ色の 6 点ポリゴンになり、残り 5 点の順序は変わりません。
完全な CSS 例は .clipped-shape、幅 240px、縦横比 4 / 3、背景 #ff6600、-webkit-clip-path と clip-path を含みます。コピー結果はダウンロードした toolars-clip-path.css（240 バイト）と一致しました。宣言のみのモードでは clip-path: polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);（UTF-8 で 73 バイト）を正確にコピーできました。自分のレイアウトで切り抜きを確認してください。
点 1 の X を 101% にします。2026-09-24 の画面では座標が有限値かつ 0〜100% の範囲である必要があると表示され、プレビューと CSS が消え、コピーとダウンロードが無効になりました。X を 30% に戻すと polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%) が復元します。交差する辺は自動修復されません。
4 種類のプリセットから頂点を追加・削除・移動し、clip-path 宣言またはサンプル CSS を書き出せます。 座標は要素に対する割合です。既存のルールに宣言を貼るか、サンプルの .clipped-shape クラスを使い、パソコンとモバイルで確認してください。
よくある質問