ツールを実行
CSSのclip-pathプロパティを利用して要素を切り抜くコードを生成するオンラインツールです。円（circle）や楕円（ellipse）、三角形、六角形、五角形、星形、菱形といった図形名を指定して、HTML要素を直感的な形状にクリッピングできます。円や楕円を選択した場合は、指定したサイズ数値や配置位置（centerやtop leftなど）が反映されたスタイル宣言が作成されます。三角形や星形などの多角形テンプレートは、あらかじめ定義された固定座標のパーセント値を用いて出力されます。未入力の場合は初期値として50%サイズの円が中央に配置されます。Web制作での画像切り抜きや装飾パーツ作成にご活用ください。
使い方
- 切り抜きたい図形の種類（circle、ellipse、triangle、hexagon、pentagon、star、diamond）を入力します。
- 必要に応じてサイズ（パーセント値）と配置位置（centerやtop leftなど）を指定します。
- 生成ボタンを押すと、出力欄にclip-pathを含むCSS宣言コードが表示されます。
- 表示されたCSSコードをコピーして、スタイルシートや要素のstyle属性に適用します。
使用例
- 図形に「circle」、サイズに「40」、位置に「top left」を指定して、左上を起点とした円形のclip-pathコードを生成する。
- 図形に「star」を指定して、星形ポリゴンの固定座標によるclip-pathコードを生成する。
よくある質問
多角形（triangleやstarなど）でサイズや位置を変更しても反映されないのはなぜですか？
三角形や星形、六角形などの多角形テンプレートは固定されたパーセント座標を使用しているため、サイズや位置の入力値は反映されません。サイズや位置の設定値が反映されるのはcircleおよびellipseのみです。
未対応の図形名を入力した場合はどうなりますか？
対応していない図形名が指定された場合は、自動的にcircle（円）のテンプレートが適用されてコードが生成されます。
生成されたCSSコードはどのように使用しますか？
出力されたclip-pathの宣言をコピーし、対象の画像やdiv要素などのCSSセレクタ内に貼り付けて適用してください。