Jump to content

How do I place this Clip path at the top?


simona6

Recommended Posts

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?

Link to comment
Share on other sites

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 

Link to comment
Share on other sites

  • 3 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.