CSS Clip-Path ジェネレーター
CSS clip-path 宣言を生成します — 円、楕円、inset、またはポリゴン図形（三角形、六角形、星、矢印など）のいずれかに対応し、手動で編集可能なカスタムポイントリストを備えています — クリップされた図形のライブプレビューが表示されます。
入力
基本的な図形またはポリゴンプリセットを選択するか、カスタムポリゴンを選択して頂点を手動で編集します。
出力
クリップされた図形がここに表示されます。
上のプレビューに対応するインラインスタイル div — どこにでも貼り付けられます。
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-clip-path-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"shapeType": "circle",
"circleRadius": "50",
"circleCx": "50",
"circleCy": "50"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-clip-path-generator` tool (CSS Clip-Path Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-clip-path-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS Clip-Path ジェネレーター — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
clip-path とは何ですか？
clip-path は CSS プロパティで、定義した図形の外側にあるすべてを隠し、内側にある部分だけを表示させます — 画像エディター、マスク ファイル、追加のマークアップは不要です。これにより、通常の <div> または <img> で CSS だけを使用して、円形のアバター、六角形のバッジ、傾斜したセクション区切り線、矢印形のボタン、吹き出しコールアウトを作成できます。
このツールは図形ピッカーから準備完了の clip-path 宣言を構築し、CSS が生成するものを正確にライブプレビューします。
このツールの使い方
- 図形 を選択します — 基本的な図形（円、楕円、Inset）またはポリゴンプリセットの 1 つ（三角形、ひし形、五角形、六角形、八角形、星、メッセージ、矢印、十字、シェブロン、平行四辺形、台形）。
- 微調整します：
- 円 — 半径と中心 X/Y（すべて要素のボックスの割合）。
- 楕円 — 独立した半径 X/Y と中心 X/Y。
- Inset — 上/右/下/左のインセット（各辺がボックスから内側に引き込まれる距離）と、丸い長方形用のオプションのコーナー半径。
- ポリゴン プリセットは固定図形です — 代わりに カスタム ポリゴン を選択して、頂点リストを手動で編集します（下記参照）。
- カスタム ポリゴン の場合、ポリゴン ポイント フィールドを編集します：カンマで区切られた
x% y%ペアのリスト（頂点ごと 1 つ、図形を順番に回る、最低 3 個）。上記の各ポリゴン プリセットは実際に、その下にあるこれらのリストの 1 つにすぎません — プリセットの出力polygon()座標をこれにコピーして、微調整したい場合の出発点として使用します。 - CSS をコピーして任意の要素に適用します —
clip-pathは画像、div、ボタン、ボックス付きのものに対して機能します。プレビュー はそれがどのように見えるかを正確に示します；HTML スニペット はその下の、スタイルシートが便利でない場所にペーストできる、同じマークアップの自己完結的な、インラインスタイルの<div>です。
clip-path と -webkit-clip-path の両方が必要な理由は？
プレフィックスなしの clip-path プロパティはすべての現在のブラウザーでサポートされていますが、-webkit- プレフィックス付きのフォームは、プレフィックス付きバージョンのみを認識していた古い WebKit ベースのブラウザー用に含まれています — これは最新のブラウザーではコストのない廉価な互換性行です。
FAQ
clip-path をアニメーション化できますか？
はい — clip-path はアニメーション可能なので、同じ図形タイプの 2 つの値（たとえば、同じ数のポイントを持つ 2 つの polygon() または 2 つの circle() 半径）間の遷移は、プレーン CSS transition で滑らかにアニメーション化されます。このツールは単一の静的値を生成します；transition: clip-path 0.3s ease; を独自に追加します。
すべてのポリゴン頂点が % を使用する必要がありますか？
このツールは常にパーセンテージを出力します（要素のサイズに応じてスケーリングされます —最も移植性が高い選択肢）。コピーした CSS を手動で編集して px を使用することで、固定サイズの図形が必要な場合は使用できます。
Star プリセットのポリゴン パーセンテージが「間違っている」のはなぜですか？ 10 ポイントの星には、図形の中心から外半径と短い内半径の間で交互に行われるポイントがあります — パーセンテージは均等に見えることを意図しておらず、星のスパイクと内側の刻みを示しています。
clip-path はクリック/ホバー ターゲットに影響しますか？
いいえ — 表示されるクリップされた領域の外側をクリックすると、ポインター イベント自体を制約しない限り（たとえば、pointer-events: none とクリップされたオーバーレイ、またはボックスが図形になるようにレイアウトを再加工する）、ほとんどのブラウザーでは要素の元の（クリップされていない）ボックスにヒットします。
プライバシー
すべてはブラウザー内で発生します。選択した図形と設定はサーバーに送信されることはありません — CSS とプレビューはコントロールを調整する際にローカルで生成および更新されます。