simona6 Posted July 1, 2024 Share Posted July 1, 2024 clip-path: ellipse(100% 60% at 50% 40%); Trying to create this bottom curve, at the top of a DIV. I can't see how to do it - is it not possible or is "ellipse" the wrong word? Quote Link to comment https://forums.phpfreaks.com/topic/322067-how-do-i-place-this-clip-path-at-the-top/ Share on other sites More sharing options...
Danishhafeez Posted July 4, 2024 Share Posted July 4, 2024 To create a bottom curve at the top of a div using clip-path, you are on the right track with ellipse. The clip-path property allows you to define a clipping region to restrict the visible portion of an element. .div-with-curve { width: 300px; /* Adjust width as needed */ height: 200px; /* Adjust height as needed */ background-color: #f0f0f0; /* Background color of the div */ clip-path: ellipse(100% 60% at 50% 0%); } In this configuration, the ellipse will be centered horizontally (50%) and positioned at the top edge (0%), creating a curved cutout at the top of the div. The ellipse itself will have a horizontal diameter equal to the width of the div and a vertical diameter 60% of the height of the div. Here’s an example HTML structure to see it in action: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Curved Div</title> <style> .div-with-curve { width: 300px; /* Adjust width as needed */ height: 200px; /* Adjust height as needed */ background-color: #f0f0f0; /* Background color of the div */ clip-path: ellipse(100% 60% at 50% 0%); } </style> </head> <body> <div class="div-with-curve"></div> </body> </html> This CSS snippet will create a curved shape at the top of the div, achieving the effect you described. Adjust the dimensions and positioning values (100%, 60%, 50%, 0%) as necessary to fine-tune the curve according to your design needs. Best Regard Danish Hafeez | QA Assistant https://www.ictinnovations.com https://www.ictbroadcast.com Quote Link to comment https://forums.phpfreaks.com/topic/322067-how-do-i-place-this-clip-path-at-the-top/#findComment-1629267 Share on other sites More sharing options...
Barand Posted July 4, 2024 Share Posted July 4, 2024 Try adding some content to the div. Such as... <div class="div-with-curve"> On what planet is this curve at the top? </div> Quote Link to comment https://forums.phpfreaks.com/topic/322067-how-do-i-place-this-clip-path-at-the-top/#findComment-1629273 Share on other sites More sharing options...
simona6 Posted July 24, 2024 Author Share Posted July 24, 2024 The last reply still had the curve at the bottom. Quote Link to comment https://forums.phpfreaks.com/topic/322067-how-do-i-place-this-clip-path-at-the-top/#findComment-1630752 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.