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

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.