How to Create a Top-Curved Background with CSS Pseudo Elements?

Top-Curved Background with Pseudo Elements

To enhance a background image with a subtle curved cutout on top, utilize the power of CSS pseudo elements. The challenge involves positioning the cutout appropriately, so it overlaps the background at the desired location. By modifying the original code, you can achieve this effect:

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

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