CODEWITHSUNDEEP
cssellipseclip-path
zendevil.eth
zendevil.eth

Reputation: 1102

How does the clip-path: ellipse property work?

In this documentation:

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

The clip-path property used like

clip-path: ellipse(150px 160px at 100px 200px)

does work to cut an ellipse at the bottom of the div, but I want to cut an ellipse at the top of the div. How can I do that? And what if I want to cut a concave ellipse and not a convex one?

Upvotes: 0

Views: 1337

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105983

to make short : placement is set from the middle of the shape

and values can be seen like :

clip-path: ellipse(width height at left top )

If you set a shape at 0 0 you will only see a quart of it the bottom and right part of it from the center of the shape .

html {
  background:white;
}
body {
  background:black;
  height:100vh;
  clip-path: ellipse(150px 160px at 0 0);
}

with vh/vw value you can do something alike :

html {
  background:white;
}
body {
  background:black;
  height:100vh;
  clip-path: ellipse(25vw 25vh at 50vw 50vh );
}

Does this make it easier ?

Upvotes: 1

Related Questions