直感的なマウス操作でCSSコードを生成
プレビュー画面上のポイント（頂点）をドラッグするだけで、リアルタイムにCSSのclip-path: polygon()プロパティが生成されます。
各頂点の座標は要素の幅と高さに対するパーセンテージ（%）で計算されるため、レスポンシブデザインにもそのまま適用可能です。複雑な計算やコードの微調整をすることなく、思い通りの多角形（ポリゴン）クリッピングを素早く実装できます。
px単位の指定と曲線（SVGパス）の制限
本ツールは要素の拡縮に強いパーセンテージ指定のpolygon()関数に特化しています。そのため、ピクセル（px）単位での厳密な座標指定や、circle()やellipse()、複雑な曲線を描くSVGのpath()関数には対応していません。
もし角を丸くしたり、ベジェ曲線を用いた切り抜きを行いたい場合は、本ツールの対象外となるため、別途インラインSVGを用いたクリッピングマスクを検討してください。
ホバーアニメーションやプリセットの活用
星型や矢印、吹き出しといったよく使われる図形はプリセットとして用意されており、ワンクリックでベースとして呼び出すことができます。
また、CSSトランジションを用いてクリップパスをアニメーションさせる場合、変更前と変更後でポリゴンの頂点数が完全に一致している必要があります。本ツールで作成したコードをコピーし、頂点数を変えずに形だけを微調整した別の状態を作ることで、滑らかな変形アニメーションを容易に実装できます。
よくある質問
画像以外の要素（divやiframeなど）にも使用できますか？
はい、使用可能です。生成されたCSSコードは、画像（imgタグ）だけでなく、テキストを含むdivブロックやiframe、videoタグなど、あらゆるHTML要素に対して適用できます。
切り抜かれた外側の領域はマウスイベントに反応しますか？
いいえ、反応しなくなります。clip-pathで切り抜かれて非表示になった領域は、クリックやホバーといったマウスイベントを受け付けません。これにより、斜めの境界線を持つボタンなどを意図した通りに正確に実装できます。
異なる図形間でアニメーションさせることは可能ですか？
可能ですが、CSSの仕様上、アニメーションの開始時と終了時でpolygonの頂点数が一致している必要があります。頂点数が異なる図形へ変形させようとすると、滑らかにアニメーションせず瞬時に切り替わってしまうため注意が必要です。
作成できる頂点の数に制限はありますか？
ツール上の制限は特に設けておらず、任意の数の頂点を持つ多角形を作成できます。ただし、頂点数が極端に多い複雑な図形を作成する場合は、ブラウザの描画パフォーマンスやコードの可読性の観点からSVGの利用を推奨します。
プレビューのために読み込んだ画像データはどこかに送信されますか？
いいえ、外部へ送信されることはありません。ToolMoleのすべての処理はお使いのブラウザ上でローカルに完結しており、画像データや作成した座標情報がサーバーにアップロードされることは一切ありません。
ツールの不具合や改善案はありますか。 フィードバックを送る