CSS を使用して、カットアウト上部を湾曲した上部の背景に変換するにはどうすればよいですか?

カットアウト上部を湾曲した上部背景に変換する

このコードベースのタスクでは、ブロックの右側に位置するカットアウトを曲線状の上部背景に変換することを目的としています。ブロックの上に優雅に座る曲線状の形状。

現在のコード スニペットには、.top 要素を含む .box が含まれています。望ましい効果はカットアウトを上部に配置することですが、コードではカットアウトを右側に配置します。それでは、改訂版について詳しく見ていきましょう:

<code class="css">.box {
  margin-top: 90px;
  width: 200px;
  height: 100px;
  background: white;
  position: relative;
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  bottom: 100%;
  width: 50%;
  left: 0;
  height: 80px;
  background:
    radial-gradient(50% 100% at bottom left, #fff 98%, #0000) top,
    radial-gradient(50% 100% at top right, #0000 98%, #fff) bottom;
  background-size: 100% 50%;
  background-repeat: no-repeat;
}

.box:after {
  transform-origin: right;
  transform: scaleX(-1);
}

body {
  background: pink;
}</code>

主な調整:

• 少なくとも一致するように .box の margin-top を設定しました。擬似要素の高さ。切り抜きがブロックと重ならないようにします。
• 擬似要素は、bottom: 100% を使用して .box の下部に配置されます。
• 疑似要素の高さは 80 ピクセルに設定されており、これを調整してカーブの高さを制御できます。
• 背景のグラデーションは、必要な放射状の効果を作成するために変更されています。

ほら！これで、ブロックの上部からシームレスに流れる曲線状のカットアウトが完成しました。自由にさらに実験して、デザインを完璧に補完する曲線を作成してください。

以上がCSS を使用して、カットアウト上部を湾曲した上部の背景に変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。