Home  >  Article  >  Web Front-end  >  How to Create a Top-Curved Background with CSS Pseudo Elements?

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

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-10-31 06:46:02593browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn