使い方
シェイプの種類（多角形・円・楕円・インセット）を選び、プレビュー上のポイントをドラッグして形を調整すると、対応するCSSのclip-pathコードがリアルタイムで生成されます。多角形はダブルクリックで頂点を追加できます。 三角形・星形・矢印などのプリセットも用意しているので、そこから始めて微調整するのが手早い使い方です。生成されたコードはコピーしてそのままスタイルシートに貼り付けられます。
- polygon / circle / ellipse / inset の各シェイプに対応
- ドラッグ＆ドロップでの直感的なポイント編集
- ダブルクリックで頂点追加
- 三角形・星形・矢印などのプリセット
- リアルタイムのCSSコード出力とコピー
こんなときに使おう
- 画像を斜めや多角形に切り抜いたデザインを作りたいとき
- ヒーローセクションの区切りに変形シェイプを使いたいとき
- CSSだけでアイコン的な形状を作りたいとき
- clip-pathの座標を目で確認しながら調整したいとき