Home  >  Article  >  Web Front-end  >  How to Position a Cutout Curve at the Top of a Background Using CSS?

How to Position a Cutout Curve at the Top of a Background Using CSS?

Barbara Streisand
Barbara StreisandOriginal
2024-11-02 14:01:30521browse

How to Position a Cutout Curve at the Top of a Background Using CSS?

How to Position a Cutout Curve on Top of a Background

The goal is to modify the provided CSS code to position the cutout curve (.top) at the top of the background (.box), instead of the right side.

CSS Code Explanation:

In the original code, the .top element is positioned relative to its parent .box using transform:translateY(-100%). This effectively places it below the background.

To move the curve to the top, we need to:

  1. Adjust the margin-top of the .box container to create space above it.
  2. Reposition the .top element using pseudo-elements to create the curve at the top.

Revised CSS Code:

.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;
}

How it Works:

  • The .box container now has a margin-top of 90px, providing space above it for the cutout curve.
  • The .top element is removed, and two pseudo-elements are created below the .box container.
  • These pseudo-elements use gradients to create the curve shape.
  • transform-origin:right and transform:scaleX(-1) are used on the second pseudo-element to flip the curve horizontally.

By implementing these changes, the cutout curve will now be positioned on top of the background as desired.

The above is the detailed content of How to Position a Cutout Curve at the Top of a Background Using CSS?. 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