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!