polygon()とcircle()によるclip-path
clip-pathプロパティを使い、要素をカスタムの多角形または円形に切り抜きます。
「polygon()とcircle()によるclip-path」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
clip-pathとは
clip-pathは、要素の可視領域を指定した形状に切り抜きます。形状の外側は見えなくなりますが、レイアウト上のスペースは占有したままです。
clip-path: circle()
要素を円形に切り抜きます。引数には半径を指定します。
<div class="avatar"></div>
<div class="badge"></div>
clip-path: ellipse()
x方向の半径、y方向の半径、必要に応じて中心位置を指定して、楕円形に切り抜きます。
<div class="card-image"></div>
clip-path: polygon()
最も強力なclip-pathです。x,y座標の組を列挙して多角形を定義します。
<div class="hexagon"></div>
<div class="diagonal-cut"></div>
clip-path: inset()
必要に応じて角を丸めた長方形に切り抜きます。引数には内側への距離を指定します。
<div class="card"></div>
セクションの形状に使うclip-path
ページ内のセクション間に斜めの切り替えを作成します。
<div class="section-diagonal">Diagonal Section</div>
clip-pathのアニメーション
同じ数の頂点を持つclip-path同士であれば、切り替えによる表示やモーフィングのアニメーションを作成できます。
<div class="reveal visible"></div>
clip-pathとborder-radiusの比較
単純な角丸の形状には、border-radiusの方が適しています。背景とボーダーの両方に作用するためです。border-radiusでは実現できない非長方形の形状が必要な場合は、clip-pathを使用します。
clip-path: path()
path()には、任意の形状を表すSVGパス文字列を指定できます。
<div class="star"></div>
パフォーマンス上の注意点
clip-pathは新しいスタッキングコンテキストを作成し、アニメーション中はフレームごとにペイントが発生する可能性があります。clip-pathのアニメーションはtransformやopacityよりも負荷が高いため、慎重に組み合わせてください。
clip-pathの参照ボックス
clip-pathの座標系は要素のborder boxです（SVGではmargin box）。パーセンテージは要素の寸法を基準にします。
理解度チェック
座標の組で定義された、不規則な非長方形の形状を作成するclip-path関数はどれですか。
まとめ
clip-pathは要素を幾何学的な形状に切り抜きます。circle()とellipse()は丸みのある切り抜きを作成します。polygon()は複数の頂点を持つ任意の形状を定義します。inset()は、必要に応じて角を丸めた長方形に切り抜きます。同じ数の頂点を持つpolygon形状間でアニメーションすると、印象的な表示効果を作成できます。SVGベースの任意の形状にはpath()を使用します。
AI チューターと学ぶ CSS — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 40
- レッスン
- 159
よくある質問
「polygon()とcircle()によるclip-path」レッスンは無料ですか？
はい。「polygon()とcircle()によるclip-path」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「polygon()とcircle()によるclip-path」で何を学びますか？
clip-pathプロパティを使い、要素をカスタムの多角形または円形に切り抜きます。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「polygon()とcircle()によるclip-path」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- polygon()とcircle()によるclip-path
- テキストの回り込みのためのshape-outside
- clip-path図形のアニメーション
- CSSマスクとClip-pathの比較