CSSクリップパスジェネレーター
ガイド
CSSクリップパスジェネレーター
直感的なドラッグ＆ドロップエディターで CSS clip-path 図形を視覚的に作成します。ポリゴン、円、楕円、インセット図形を構築してから、生成された CSS をスタイルシートに直接コピーします。
使い方
図形タイプを選択するか、プリセットテンプレートから開始します。コントロールポイントをドラッグして、プレビューキャンバス上の図形を視覚的に調整します。編集すると、CSS clip-path コードがリアルタイムで更新されます。結果に満足したら、生成された CSS コードをコピーするか、SVG としてエクスポートします。
特徴
- 視覚的なドラッグ＆ドロップエディター – キャンバス上で直接コントロールポイントを移動して図形を作成します
- 複数の図形タイプ – ポリゴン、円、楕円、インセット
- プリセットテンプレート – 三角形、星、矢印などの一般的な図形から開始します
- 元に戻す/やり直し – 非破壊編集のための完全な履歴サポート
- グリッドにスナップ – 設定可能なグリッドスナップによる正確なポイント配置
- SVG エクスポート – 図形を SVG ファイルとしてダウンロードします
- ライブ CSS 出力 – 生成された clip-path プロパティを即座にコピーします
よくある質問
-
CSS clip-path とは何ですか、どのように機能しますか？
CSS clip-path は、要素のどの部分が表示されるかを決定するクリッピング領域を定義します。clip-path 図形の外側にあるものはすべて非表示になります。基本的な図形（円、楕円、インセット、ポリゴン）と SVG パス定義をサポートします。矩形の境界にクリップするだけの overflow:hidden とは異なり、clip-path はクリエイティブなレイアウトや視覚効果のために、複雑な非矩形の表示領域を作成できます。
-
CSS の clip-path と mask の違いは何ですか？
Clip-path はハードエッジを作成します — ピクセルは、定義された図形の内側にあるかどうかに基づいて、完全に表示されるか完全に非表示になります。CSS mask は画像またはグラデーションを使用して透明度を制御し、ソフトエッジと部分的な透明度を可能にします。Clip-path は幾何学的な図形ではよりシンプルでパフォーマンスが高く、mask はグラデーションとアルファチャンネルでより芸術的な制御を提供します。
-
CSS ポリゴンの座標はどのように機能しますか？
Clip-path のポリゴン座標は、要素の境界ボックスに対するパーセンテージまたは長さの値を使用します。各ポイントは、0 % 0 % が左上隅、100% 100% が右下隅となる x,y ペアとして定義されます。ポイントは順番に接続されて図形を形成します。たとえば、polygon(50% 0%, 100% 100%, 0% 100%) は三角形を作成します。図形は、最後のポイントを最初のポイントに接続して自動的に閉じられます。
恵 スコアボードが到着しました！
スコアボード ゲームを追跡する楽しい方法です。すべてのデータはブラウザに保存されます。さらに多くの機能がまもなく登場します！
必見ツール
すべて表示参加する
価値ある無料ツールの提供を継続するためにご協力ください
