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