CSS Clip-Path ジェネレーター

例 1：見出しの吹き出し

ブログの見出しや会話風の UI でよく使う、左下にしっぽが付いた吹き出しを作ります。「矢印」プリセットを押すと頂点が 7 個になるので、頂点リストを次の値に書き換えます。

.element {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 30% 75%, 20% 100%, 20% 75%, 0% 75%);
}

下から 25% の帯がしっぽ部分になり、文字は上 75% の範囲に収めます。パディングの下側を 25% 相当にしておくと、文字がしっぽに重なりません。すべてパーセントなので、見出しの文字数が変わって幅が伸びても形の比率は保たれます。

例 2：星形プリセットの出力

「星」を押すと 10 頂点の値がそのまま出力されます。

polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)

ランキングのバッジやセール表示に使うときは、背景色だけでなく文字の位置も星の内側に入るよう確認してください。星の先端付近は面積が小さく、文字が欠けやすい部分です。

例 3：横長バナーの円

プレビュー比率を 2:1 にして「円」を選び、半径 50% のままにします。値は circle(50% at 50% 50%) ですが、破線の円はバナーの高さより大きくなります。CSS Shapes Level 1 では、半径のパーセントを参照ボックスの方向に依存しないサイズ（対角線 ÷ √2）に対して解決します。400 × 200 の要素では次のとおりです。

半径 158.11px。円の上下は要素自身の端で切れます。Chromium の document.elementFromPoint() で確かめると、中心から右へ 155px の点は要素に当たり、162px の点は背後の body に当たりました。4 辺に接する形が必要なら「楕円」を使います。

小数と矢印キーで微調整

300px のプレビューでは、三角形の上の頂点を右へ 7px、下へ 3px ドラッグした結果です。

52.33% 1%。整数に丸めず、小数第 2 位まで残します。キーボードでは、50% 0% から右矢印を 1 回、Shift+下矢印を 1 回押すと次の値になります。

51% 10%。マウス操作が難しい場合や、デザインカンプの数値に 1% 単位で合わせたい場合に使えます。

ほかのジェネレーターとの違い

2026 年 10 月 3 日に、Bing（日本）で「clip-path ジェネレーター」1 位の ZERONOVA LAB と、Clippy（Bennett Feely）、365工具箱、ToolBada を同じ手順で試しました。ZERONOVA LAB・Clippy・365工具箱では、上の頂点を右へ 7px、下へ 3px 動かすと 52% 1% か 53% 1% になり、整数に丸められます。ハンドルは Tab で選べない div 要素で、キーボードでは動かせません。ToolBada はテキストエリアで頂点を編集する方式で、ドラッグ用のハンドルはありません。

4 つとも path()、shape()、rect()、xywh()、参照ボックスは入力できませんでした。プリセットの数はほかのツールが多く、ZERONOVA LAB は 18 種類、Clippy は 27 の形状を選べます。本ツールのプリセットは 5 種類です。小数の座標、キーボード操作、手書きの CSS をブラウザーで検証したい場合に向いています。

CSS 値タブ

「CSS 値」タブには、任意の基本図形または参照ボックスを入力できます。使っているブラウザーの CSS.supports('clip-path', 値) で使えるかを判定し、そのままプレビューします。例のメニューには path()、shape()、inset(10% round 16px) content-box があります。path() の座標は CSS ピクセルなので要素の大きさに合わせて伸縮しません。伸縮させたい場合はパーセントが使える shape() を選びます。

参照ボックスを書かない場合は border-box が基準です。CSS Masking の仕様では padding-box や content-box に変更できます。「参照ボックスを表示」をオンにすると、プレビューに 12px の枠線と 16px の余白が付き、border-box・padding-box・content-box の境界が破線で表示されます。形がどの境界に沿っているかを確認できます。

url()、var()、env()、コメント、エスケープを含む値は受け付けません。使う側のページによって結果が変わるため、ここでのプレビューが正しいとは限らないからです。括弧や引用符が閉じていない値も受け付けません。Chromium では CSS.supports('clip-path', 'polygon(50% 0%, 100% 100%') が true を返します。入力の末尾でパーサーが括弧を補うためですが、同じ文字列をスタイルシートに貼るとルールが壊れます。入力した値はプレビューのみで、ハンドルには変換されません。値を受け付けないときは、ステータス行に理由と位置を表示します。circle(50%)) は「12 文字目：「)」に対応する「(」がありません。」、polygon(0 0, 100% 0, 50%) は「polygon() の 3 番目の点に値が 1 個あります。」です。関数名のつづりが違うときは候補を示します（polgon() → polygon()）。

アニメーションの条件

CSS Shapes の補間規則では、2 つの値が同じ関数である必要があり、polygon() は頂点数と塗りつぶし規則もそろえます。プリセットは頂点数がばらばら（ひし形 4、六角形 6、星 10）なので、ひし形から六角形へのトランジションは途中の形を経ずに切り替わります。頂点数をそろえてから、Cubic Bezier ジェネレーターでイージングを選んでください。

制限事項

• ハンドルを使うモードの値は 0〜100% です。要素の外に頂点を置くときは「CSS 値」タブで入力します。
• インセットの上下（または左右）の合計が 100% を超えると、合計がちょうど 100% になるまで比率を保って縮小され、面積は 0 になります（下の例を参照）。
• インセットの角丸は 1 つのパーセント値だけです。楕円の角や px 単位の角丸は「CSS 値」タブで書きます。
• MDN の互換性データ 8.1.4 によると、shape() は Chrome 135・Firefox 148・Safari 18.4、rect() と xywh() は Chrome 119・Firefox 122・Safari 17.2 から使えます。
• 形の外側にある box-shadow とフォーカスのアウトラインも切り取られます。また、形の外側はクリックの判定から外れます。

たとえば 400 × 200 の要素で上 70%・下 50% にすると、縮小後の上・下のオフセットと残りの高さは 58.33% / 41.67% / 0px で、何も表示されません。

clip-path を使わずに三角形だけ作りたい場合は、border で描く CSS 三角形ジェネレーターも使えます。