図形
斜めの四角形
出力
clip-path: polygon(...)
デザインツール
CSSクリップパス - 図形ジェネレーター
preset と簡単な control から CSS clip-path の shape を生成し、live preview で確認できます。angled card、badge、画像 crop、装飾 layout に便利です。
CSSclip-pathShape
このツールをお気に入りに
お気に入りの保存方法がまだ選ばれていません。
クイック操作
このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。
设计配色
CSSクリップパス
preset と簡単な control から CSS clip-path の shape を生成し、live preview で確認できます。angled card、badge、画像 crop、装飾 layout に便利です。
最终 CSS 属性
利用シーン
- 斜めカットや不規則な card を作る
- 画像の表示領域を shape で切り抜く
- 装飾用の幾何図形を作る
使い方
- shape preset を選ぶ
- 主要パラメータを調整する
- preview して CSS をコピーする
入出力サンプル
FAQ
polygon に対応していますか？
はい。CSS へそのまま使える clip-path 値を出力し、多くの preset は polygon(...) 形式になります。
古い browser の対応状況はどうですか？
clip-path は modern browser では良好に動きます。かなり古い環境まで支える必要がある場合は、切り抜きなしの fallback を用意してください。
ツール
関連ツール
近い用途の翻訳済みツールへ続けて進めます。