開発者 / CSSシェイプ
CSSクリップパスジェネレーター：ポリゴン、円、楕円、インセット
6種類のポリゴンプリセット、ドラッグやキーボードで調整できるポイント、円・楕円・インセットの設定でCSSの切り抜きを作成できます。グラデーションまたはローカル画像をプレビューし、パーセントまたはピクセル単位のCSSをコピーできます。
CSSクリップパスジェネレーター：ポリゴン、円、楕円、インセット: 元の画像ファイルを変更せず、プレビューを選択した形状にクリップします。パーセント出力は要素の寸法に従います。ピクセル出力では基準となる幅と高さを使用し、表示されるプレビューは画面に合わせて拡大・縮小されます。 サーバーへのファイルアップロードは一切なく、100%ブラウザ内でローカル実行します。
- カテゴリ
- 開発者ツール
- 実行回数
- ブラウザ内で
- コスト
- 無料 · 登録不要
- 提供状況
- すぐに使えます
完全にブラウザ内で実行します
番号付きのポイントをドラッグするか、矢印キーを使うか、座標を入力してください。下の座標はパーセンテージで、ピクセル出力には基準サイズが使われます。
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
パーセント指定の形状は要素に合わせてサイズ変更されます。円のパーセントには正規化された対角線を、楕円のパーセントには幅と高さを使用します。ピクセル座標は基準寸法に固定されます。
CSSクリッピング
MDN clip-path: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path 。クリッピングは、要素のレイアウトボックスを変更せずに、表示領域を変更します。
基本図形の座標
W3C CSS Shapes Level 1, basic shapes: https://www.w3.org/TR/css-shapes-1/#basic-shapes 。ポリゴンの座標と楕円の半径は参照ボックスを基準に解決されます。円のパーセンテージには、参照ボックスの正規化された対角線が使われます。プリセットの座標とグラデーションはオリジナルのアートワークです。
使い方
- 形状とプリセットを選び、基準となる寸法を設定します。
- ポリゴンのポイントをドラッグし、矢印キーを使うか座標を編集します。他の形状では各コントロールを調整します。
- パーセントまたはピクセルの出力を選び、CSSをコピーします。
プライバシーと制限事項
任意で使用する画像のプレビューはデバイス上に保持されます。アップロードは一切行いません。
関連ツール
よくある質問
ドラッグせずにポイントを編集するにはどうすればよいですか？
番号付きのハンドルにフォーカスして矢印キーを使うか、ポイント一覧でXとYのパーセンテージを入力します。ポリゴンには少なくとも3つのポイントが必要です。
切り抜いた画像を書き出せますか？
いいえ。HTML要素用のCSSを書き出します。ローカル画像はプレビュー専用です。
円のパーセンテージはどのように測定されますか？
CSSでは、正規化された対角線sqrt((width squared + height squared) / 2)を円の半径の基準として使用します。楕円の半径では幅と高さをそれぞれ使用します。
無料ツール · ブラウザ内で · アカウント不要