使い方
- SVG エディターでプリセット形状を選択するか、デフォルトポリゴンから開始します。
- 円形のハンドルをドラッグして、ポリゴンの各頂点を再配置します。
- 新しいポイント (選択されたエッジの中点に挿入) を追加するか、選択されたポイントを削除します。
- 座標入力で正確な X/Y パーセンテージを微調整します。
- 生成された clip-path CSS をコピーしてスタイルシートに貼り付けます。
例
- 三角形ハンドルを 50% 0%、0% 100%、100% 100% にドラッグすると、clip-path: polygon(50.0% 0.0%, 0.0% 100.0%, 100.0% 100.0%) が生成されます。
- 矩形の右端にポイントを追加し、それを外側に引き出すと、矢印形状がリアルタイムで作成されます。