ポイントをドラッグして形を変える
シェイプの頂点をドラッグして変形。右クリックで頂点を削除。ダブルクリックで頂点を追加。
プリセット
<!-- プレビュー設定 -->
<div class="cp-card">
<h3>プレビュー設定</h3>
<div class="cp-bg-row">
<label>シェイプ色</label>
<input type="color" class="cp-color-input" id="cp-shape-color" value="#6366f1">
</div>
<div class="cp-bg-row">
<label>背景色</label>
<input type="color" class="cp-color-input" id="cp-bg-color" value="#e2e8f0">
</div>
<div class="cp-bg-row">
<label>画像</label>
<button class="cp-img-btn" id="cp-upload-btn">画像をアップロード</button>
<input type="file" id="cp-file-input" accept="image/*" style="display:none">
</div>
<button class="cp-reset-btn" id="cp-clear-img" style="display:none">画像を削除</button>
</div>
<!-- CSS出力 -->
<div class="cp-card">
<h3>CSS出力</h3>
<div class="cp-output-box" id="cp-output">clip-path: polygon(...);</div>
<button class="cp-copy-btn" id="cp-copy-btn">CSSをコピー</button>
</div>
<!-- シェイプ情報 -->
<div class="cp-shape-info" id="cp-shape-info">polygon · 0点</div>
<button class="cp-reset-btn" id="cp-reset-btn">プリセットに戻す</button>
使い方
- プリセットを選択 — 三角形・星・六角形など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会計 なら、フリーランスの経費管理もクラウドで簡単。まずは無料で試してみましょう。