CSS clip-path のシェイプを生成する方法

形状、サイズ、位置を指定すると、要素の切り抜きに使える CSS clip-path スニペットを生成できます。入力を省略した場合は、円形・サイズ 50・中央が使われます。

CSS の切り抜き形状を手早く作る

円形や楕円形などのマスク形状を CSS の clip-path で作りたいときは、形状、サイズ、位置を指定してスニペットを生成できます。生成結果には、要素の表示領域を切り抜く clip-path 宣言が含まれます。デザインカンプに合わせた画像やカードの見せ方を試すときに、座標を手入力する作業を減らせます。形状を省略した場合は円形、サイズを省略した場合は 50、位置を省略した場合は中央が使われます。

入力して CSS スニペットを生成する手順

1. 形状の入力欄で、使用したい名前を選択または入力します。専用の形状として用意されているのは、circle、ellipse、triangle、hexagon、pentagon、star、diamond です。形状を指定しない場合は円形になります。
2. サイズを入力します。円形では指定した値がパーセントとして使われ、楕円形では横方向にその値、縦方向にその値の 0.6 倍が使われます。サイズを空欄にすると 50 が使われます。
3. 位置を入力します。円形と楕円形では、指定した位置が切り抜きの基準位置として使われます。空欄の場合は中央です。
4. 生成または実行の操作を行い、表示された CSS スニペットを確認します。形状名だけを変えたい場合は、サイズと位置を同じままにして再生成すると比較しやすくなります。
5. 結果を CSS に貼り付け、対象要素に適用して見た目を確認します。三角形、六角形、五角形、星形、ひし形は、固定されたパーセント座標によるポリゴン形状です。

生成結果の読み方と調整範囲

結果は、要素の表示領域を切り抜く clip-path 宣言を含む CSS スニペットです。円形ではサイズと位置が同じ宣言に反映され、楕円形では横方向のサイズと、縦方向に 0.6 倍したサイズが位置とともに反映されます。そのため、円形から楕円形へ変更すると、縦横比の異なる切り抜きになります。

ポリゴン系の形状では、サイズや位置を入力しても座標そのものは変わりません。これらは固定座標のテンプレートとして生成されるため、形の大きさや配置を細かく調整したい場合は、生成後の CSS を別途編集して確認してください。また、形状名の選択肢にない名前を入力して、任意の図形を作る機能として扱わないでください。

使用例

プロフィール画像を円形に切り抜くため、形状を circle、サイズを 70、位置を center にして CSS スニペットを生成します。

プロフィール画像を円形に切り抜く場面で、形状に circle、サイズに 70、位置に center を入力して生成結果を確認します。

生成結果には clip-path 宣言が含まれ、円形として指定したサイズ 70 と位置 center が反映されます。

制限事項

• 三角形、六角形、五角形、星形、ひし形は固定されたパーセント座標のテンプレートで、サイズや位置によって座標が変わる形ではありません。

よくある間違い

• 形状名を選択肢にない名前へ変更しても、任意のカスタム図形になるとは限りません。まず専用の形状名から選び、必要な場合は形状を省略して既定の円形で生成してください。

よくある質問

入力を省略しても生成できますか？

はい。形状を空欄にすると円形になり、サイズは 50、位置は中央になります。

円形のサイズと位置は CSS にどう反映されますか？

円形では指定したサイズがパーセントとして使われ、指定した位置が at の後に配置されます。

楕円形のサイズはどのように決まりますか？

楕円形では、横方向に指定したサイズ、縦方向にその 0.6 倍のサイズが使われ、どちらも指定した位置に配置されます。