視覚的にCSS clip-pathシェイプを生成。プリセットから選択または独自にカスタマイズ — 円、楕円、多角形、インセット。即座に使用可能なCSSをコピー。100%無料かつクライアントサイド。
clip-path: circle(50% at 50% 50%);CSS Clip Pathジェネレーターは、CSS clip-pathプロパティを使用してカスタムシェイプを作成するためのビジュアルツールです。複雑な多角形座標を手動で書く代わりに、様々なプリセットシェイプから選択し、パラメーターをリアルタイムでカスタマイズできます。clip-pathプロパティは、要素を基本シェイプまたは多角形に切り抜くことができるため、ユニークなレイアウト、画像マスク、クリエイティブなWebデザインを作成するのに最適です。すべての処理はブラウザ内で実行されます — データはどこにも送信されません。
CSS clip-pathプロパティは、要素のどの部分を表示するかを定義するクリッピング領域を作成します。領域内の部分は表示され、外側の部分は隠れます。円()や楕円()などの基本シェイプ、角丸付き四角形のインセット()関数、またはカスタム多角形のpolygon()を使用できます。
基本シェイプ（円、楕円、インセット、多角形）を使用したclip-pathは、Chrome、Firefox、Safari、Edgeを含むすべての最新ブラウザでサポートされています。古いブラウザでは、フォールバックレイアウトを提供する必要がある場合があります。現在のブラウザバージョンでは、-webkit-プレフィックスは不要です。
はい。clip-pathは、画像、div、動画、iframeなどのあらゆるHTML要素に適用できます。円形のプロフィール画像、六角形の画像ギャラリー、斜めのセクション区切りなどを作成するのに一般的に使用されます。
border-radiusは、要素の角を丸めるだけで、根本的には長方形のままです。clip-pathは、三角形、星、カスタム多角形など、あらゆる形状を作成できます。角丸長方形を超える複雑な形状には、clip-pathを使用します。