How to Create a Curved Top for a Background Using CSS?

Creating a Curve on the Top of a Background

In the provided design, the cutout is intended to appear above the background instead of to its right. Here's how you can modify the CSS code to achieve this:

<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>

In this updated code:

• The margin-top for the box is increased to ensure it's taller than the curve.
• The pseudo elements are both positioned at the bottom of the box (bottom: 100%).
• The height of the pseudo elements is adjusted to control the curve's height.
• The transform property is used to flip the right-hand side of the curve.

The above is the detailed content of How to Create a Curved Top for a Background Using CSS?. For more information, please follow other related articles on the PHP Chinese website!