CSS を使用して背景の湾曲した上部を作成する方法

背景の上部に曲線を作成する

提供されたデザインでは、カットアウトは背景の上に表示されるのではなく、背景の上に表示されるように意図されています。それは正しいです。これを実現するために CSS コードを変更する方法は次のとおりです:

<code class="css">/* Make the box taller to accommodate the curve */
.box {
  margin-top: 90px;
}

/* Create the top and bottom pseudo elements */
.box:before,
.box:after {
  bottom: 100%;
  width: 50%;
  left: 0;
  height: 80px; /* Adjust this to control the curve's height*/
  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;
}

/* Flip the after pseudo element */
.box:after {
  transform-origin: right;
  transform: scaleX(-1);
}</code>

この更新されたコードでは:

• ボックスのマージン上部が増加して、ボックスの高さがボックスの高さよりも高くなります。
• 擬似要素は両方ともボックスの下部に配置されます (下部: 100%)。
• 擬似要素の高さは、曲線の高さを制御するために調整されます。
• transform プロパティは、曲線の右側を反転するために使用されます。

以上がCSS を使用して背景の湾曲した上部を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。