CSSマスクとクリップパスのプロパティを使用してコーナーを切るためのトリック-CSSチュートリアル-php.cn

円形のカットアウト

グラデーションが少なくなりますか？

円形の国境のみのカットアウト

角度のあるカットアウト

ボーダーのみの角度のあるカットアウト

結論

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSマスクとクリップパスのプロパティを使用してコーナーを切るためのトリック

Joseph Gordon-Levitt

Mar 14, 2025 am 09:14 AM

この記事では、CSS maskとclip-pathプロパティを使用して、クリエイティブコーナーカットテクニックについて説明します。 CSSマスクの以前の作業に基づいて、再利用可能なコードと調整可能な変数を使用して、多様なコーナー形状を作成します。オンラインCSSジェネレーターは、結果を視覚化するために参照されます。

CSSマスクとクリップパスのプロパティを使用してコーナーを切るためのトリック

2つの主要なカットタイプが調べられます：円形と角度。それぞれが、完全な形状または国境のみの出力、およびコーナーの選択を可能にします。

CSS maskプロパティは非常に利用されています。なじみのない場合は、先に進む前にクイックプライマーをお勧めします。

円形のカットアウト

円形カットにはradial-gradient()使用されます。最初に1つのコーナーに1つの勾配が使用されます。各勾配は、要素の寸法の4分の1をカバーします。サンプル勾配：

 <code>radial-gradient(circle 30px at top left, #0000 98%, red) top left;</code>

ログイン後にコピー

これにより、左上で30px半径の円、中央に透明（＃0000）、他の場所に赤が作成されます。マイナーな調整（たとえば、100％ではなく98％）は、ギザギザのエッジを防ぎます。

最適化されたコードはカスタムプロパティを使用します：

 <code>--g: #0000 98%,#000; --r: 30px; mask: radial-gradient(var(--r) at 0 0 ,var(--g)) 0 0, radial-gradient(var(--r) at 100% 0 ,var(--g)) 100% 0, radial-gradient(var(--r) at 0 100%,var(--g)) 0 100%, radial-gradient(var(--r) at 100% 100%,var(--g)) 100% 100%; mask-size: 51% 51%; mask-repeat: no-repeat;</code>

ログイン後にコピー

発電機は、わずかに異なる、より簡潔な構文を使用します。

グラデーションが少なくなりますか？

はい！ 1つの勾配で十分です。トリックには、4つのカットコーナーの錯覚を作成するように位置が調整された単一のフルサイズのradial-gradient()が含まれます。この方法では、要素の寸法を知る必要があります。パーセンテージを使用した回避策とわずかに小さいグラデーションサイズ（99.5％）が表示されますが、小数寸法には制限があります。最終的で優れた単一勾配の方法は、負のオフセットを使用して、丸めの問題なしに同じ効果を達成します。

コーナーの無効化は、関連する勾配を削除し、残りの勾配サイズを調整することにより達成されます。

円形の国境のみのカットアウト

ボーダーのみの形状を作成するには、コンテンツの曖昧さを避けるために擬似要素が必要です。さまざまな構成（1、2、3、または4つのカットコーナー）は、目的の境界効果を実現するために、 radial-gradient()とconic-gradient()のさまざまな組み合わせを必要とします。この記事では、これらの組み合わせについて詳しく説明し、場合によっては必要な勾配の数を減らすためにrepeat-yの使用を強調しています。

角度のあるカットアウト

角度のあるカットはconic-gradient() 、コーナーごとに1つを使用します。各勾配fromと位置at勾配は、角度のあるカットを作成するように調整されます。角を無効にすると、円形のカットと同じ原則に従います。 clip-pathは代替品を提供し、各コーナーを3つのポイントで定義します。これらのポイントを計算するための式が提供されます。 90度の角度ケースは、単一の勾配を使用して最適化を可能にします。