siutil. CSS clip-path ジェネレーター
ブラウザ内で処理 · アップロードなし

形

プリセット

点をドラッグして形を変えられます。

プレビュー

CSS

 
編集はすべてブラウザ内で行われ、何もアップロードされません。
 
 
   
  
要素を好きな形に切り抜く CSS の `clip-path` プロパティを、コードを手打ちせずブラウザだけで作れるジェネレーター（メーカー）です。形は 4 種類から選べます。(1) polygon（多角形）モードは、プレビュー上に並んだ点（ハンドル）をマウスやタッチでドラッグして自由に変形でき、`polygon(50% 0%, 0% 100%, …)` の値がリアルタイムで更新されます。三角形・台形・平行四辺形・ひし形・五角形・六角形・八角形・星・十字・矢印・シェブロン・吹き出しのプリセットを下敷きにして調整でき、「＋点 / −点」で頂点の数も増減できます。(2) inset モードは上下左右の差し込み量（%）と角丸（round, px）を指定して角丸の長方形に切り抜きます。(3) circle モードは半径と中心位置で円形に、(4) ellipse モードは横半径・縦半径・中心で楕円形に切り抜きます。プレビューにはグラデーションを当てているので切り抜きの境界がはっきり分かり、`-webkit-clip-path` の接頭辞を付けるかも選べます。出力は `clip-path: …;` の 1〜2 行で、そのままコピーして CSS に貼り付けられます。形の編集・プレビュー・コード生成はすべてあなたのブラウザ内で完結し、サーバーへアップロード・保存・送信は一切行いません。
使い方
  1. 形（polygon / inset / circle / ellipse）を選びます。polygon ならプリセットを選んで下敷きにします。
  2. polygon は点をドラッグして変形し「＋点 / −点」で頂点を増減、他はスライダーで差し込み量や半径・中心を調整します。
  3. 「コピー」で `clip-path: …;` を取得します。必要なら `-webkit-` 接頭辞も付けられます。
よくある質問
clip-path とは何ですか？
要素の表示領域を指定した形に切り抜く CSS のプロパティです。`polygon()` で多角形に、`circle()` `ellipse()` で円・楕円に、`inset()` で角丸の長方形に切り抜けます。画像やボックスを三角形・星・吹き出しなどの形に見せたいときに使います。
三角形や星の clip-path も作れますか？
はい。polygon モードのプリセットに三角形・台形・ひし形・五角形・六角形・八角形・星・十字・矢印・シェブロン・吹き出しを用意しています。選んだ形を下敷きに、点をドラッグして好きな形へ調整できます。
点をドラッグして自由に変形できますか？
できます。polygon モードではプレビュー上のハンドル（点）をマウスやタッチでドラッグでき、`polygon()` の座標がリアルタイムで更新されます。「＋点 / −点」で頂点の数も変えられます。
-webkit- の接頭辞は必要ですか？
古い WebKit 系ブラウザ向けに `-webkit-clip-path` を併記すると安全です。チェックボックスで付けるか選べます。今のモダンブラウザは接頭辞なしの `clip-path` だけでも動きます。
入力した内容はアップロードされますか？
いいえ。形の編集・プレビュー・CSS の生成はすべてあなたのブラウザ内で完結し、サーバーへアップロード・保存・送信されません。完全にローカルで動作します。