CSS のみを使用して逆向きのえぐられた角を作成するにはどうすればよいですか?

CSS を使用して逆向きのすくい角を作成する

CSS では、さまざまなテクニックを使用してさまざまな形状や効果を作成できます。このような効果の 1 つは、逆にすくわれたコーナーの作成です。この場合、シェイプのコーナーが凹面 (えぐれた) に見えます。

逆のすくいコーナーの実現

達成するにはこの効果を純粋に CSS を使用して実現するには、box-shadow プロパティと overflow プロパティを組み合わせて使用​​できます。このプロセスには、次の要素の作成が含まれます:

1. オーバーフローが非表示の透明な正方形: これにより、要素が外側にこぼれるのを防ぐために、オーバーフロー プロパティが非表示に設定された基本的な正方形のコンテナが作成されます。
2. ボックス シャドウ付きの透明な円: 透明な円は box-shadow プロパティを使用して作成されます。円にシャドウ効果を追加します。
3. 円の位置の調整: 円の位置は、上または下のプロパティを使用して調整され、円の特定の部分のみが許可されます (例: 4分の1）見えるようになります。これにより、逆にすくわれた角のような錯覚が生まれます。

サンプル コード

これがどのように機能するかを説明するために、次の CSS コードを考えてみましょう。

#box {
  ...
  border-radius: 9999px 0 0 9999px;
}

#top,
#bottom {
  ...
}

#top::before,
#bottom::before {
  ...
  box-shadow: 10px 10px 5px 100px blue;
}

説明

#boxこの要素は、右上隅と右下隅を除いて角が丸いメイン コンテナとして機能します。 #top 要素と #bottom 要素は、非表示のオーバーフローを持つ正方形のコンテナーであり、両方の ::before 疑似要素は、ボックス シャドウ効果を持つ透明な円です。これらの疑似要素の上部と下部のプロパティを調整することで、円のどの部分が表示されるかを制御し、望ましいえぐれた角を作成できます。

これらの技術を組み合わせることで、純粋な要素を使用して逆のえぐられた角を実現することができます。 CSS。デザインの形状と外観を柔軟に制御できます。

以上がCSS のみを使用して逆向きのえぐられた角を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。