ポイントをドラッグして形を変える
シェイプの頂点をドラッグして変形。右クリックで頂点を削除。ダブルクリックで頂点を追加。
プリセット
プレビュー設定
CSS出力
clip-path: polygon(...);
polygon · 0点
使い方
- プリセットを選択 — 三角形・星・六角形など9種類から選べます。
- 白いコントロールポイントをドラッグ してシェイプを自由に変形。
- ダブルクリック でキャンバス上に新しいポイントを追加。
- 右クリック でポイントを削除（最小3点）。
- シェイプ色・背景色 を自由にカスタマイズ。
- 画像をアップロード して実際の写真でclip-pathを確認。
- CSSをコピー して、スタイルシートにそのまま貼り付け。
clip-pathとは
clip-pathはCSSプロパティで、要素の表示領域を多角形や円などの形に切り抜く機能です。最も柔軟な値はpolygon()で、パーセンテージ座標のリストを指定します。
/* 三角形 */
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
/* 六角形 */
clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
/* 星 */
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
他にもcircle()、ellipse()、inset()などの関数があります。
ブラウザ対応
clip-pathのpolygon値はChrome・Firefox・Safari・Edgeすべての最新ブラウザで対応済みです（2025年時点でベンダープレフィックス不要）。
関連ツール
グラデーション → グラデーションギャラリー
CSS詳細度 → CSS詳細度計算
確定申告・会計をもっとラクに？ freee会計 なら、フリーランスの経費管理もクラウドで簡単。まずは無料で試してみましょう。