Developer Tools
Design Tools
Web UtilitiesCSS クリップパスジェネレーター
ドラッグ＆ドロップのビジュアルエディターでCSSのclip-pathポリゴン・円・楕円を作成できます。矢印・三角形・星などの一般的な図形のプリセットを使用し、CSSをすぐにコピーできます。
ポイント 1
ポイント 2
ポイント 3
ポイント 4
CSSプロパティ
.element {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}CSS値
polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)関連ツール
このツールについて
使い方
- 図形タイプを選択：ポリゴン・円・楕円
- プレビューキャンバスのコントロールポイントをドラッグしてクリップパスを変形
- スライダーと入力欄で細かい設定を調整
- 生成されたCSSのclip-path値をコピーしてスタイルシートで使用
- 矢印・三角形・星などの一般的な図形のプリセットを活用
- 実際の画像または単色背景にクリップパスを適用してプレビュー
主な使用例
- ヒーローセクション用の非矩形画像クロップの作成
- 斜めやシェブロンのセクション区切りの構築
- ポリゴン形のプロフィール画像やバッジのデザイン
- ギャラリー用の幾何学的な画像マスクの作成
- 矢印形のCTAボタンの構築
- カスタム形状のUIカードやツールチップのデザイン
よくある質問
CSS clip-path とは何ですか？
CSS の clip-path プロパティを使うと、要素のクリッピング領域を定義できます。領域内の部分だけが表示され、外側はすべて非表示になります。polygon()・circle()・ellipse()・path() などの形状をサポートし、非矩形要素・斜めのセクション区切り・幾何学的な画像マスクなどを作成できます。
プレビューでコントロールポイントをドラッグするには？
ポリゴン図形タイプを選択すると、プレビューキャンバスの各頂点に青い丸いハンドルが表示されます。任意のハンドルをクリック＆ドラッグして位置を変更できます。ドラッグ中にCSSの出力がリアルタイムで更新されます。
X・Yのパーセンテージは何を意味しますか？
clip-path ポリゴンの座標は要素の幅と高さに対するパーセンテージで表されます。0% 0% が左上、100% 0% が右上、100% 100% が右下、0% 100% が左下です。
ポリゴンのポイントを追加・削除するには？
「+ ポイントを追加」ボタンで中央(50% 50%)に新しいコントロールポイントを追加し、ドラッグするかX/Yの値を編集します。ポイントを削除するには横の「− 削除」をクリックします。ポリゴンには最低3つのポイントが必要です。
利用可能なプリセット図形は何ですか？
12種類のポリゴンプリセットが用意されています：三角形・菱形・右矢印・左矢印・五角形・六角形・星・シェブロン・左斜め・右斜め・面取り・ラベット。
円のclip-pathはどのように機能しますか？
円の図形タイプを選択すると、clip-path: circle(r% at cx% cy%) という値が生成されます。半径スライダーで円のサイズを、中心X/Yスライダーで中心点の位置を調整できます。
円と楕円の違いは何ですか？
円のclip-pathは単一の半径を取り、完全な丸形のクリッピングを生成します。楕円のclip-pathはX半径(rx)とY半径(ry)を個別に指定でき、楕円形を作成できます。
生成されたCSSをコピーするには？
CSSの出力セクションには2つのコピーボタンがあります。「CSSをコピー」は .element セレクターを含む完全なCSS規則をコピーします。「値をコピー」はclip-pathの値のみをコピーし、既存の規則に貼り付けられます。
clip-pathはすべてのブラウザでサポートされていますか？
基本的な形状(polygon・circle・ellipse)を使ったCSS clip-pathは、Chrome・Firefox・Safari・Edgeなどすべての最新ブラウザで良好にサポートされています。基本形状にはベンダープレフィックスは不要です。
clip-pathの形状はアニメーション化できますか？
はい！CSS clip-pathは同じ型で同じポイント数の形状間でスムーズにトランジションおよびアニメーション化できます。例："transition: clip-path 0.4s ease"。
clip-pathをセクション区切りに使うには？
全幅のセクション要素にポリゴンclip-pathを適用して、ページセクション間に斜め・シェブロン・波状のトランジションを作成できます。左斜めまたは右斜めのプリセットを出発点として使用してください。
プレビューの背景画像オプションとは？
プレビューの背景を「画像」に切り替えると、無地のカラーの代わりにグラデーション（インディゴからピンク）で塗りつぶされます。これにより、写真やリッチな背景にclip-pathを適用した際の見た目を確認できます。