From the course: CSS: Images

Unlock this course with a free trial

Join today to access over 22,400 courses taught by industry experts.

Clip-path: Ellipse

Clip-path: Ellipse

- [Instructor] Circles can be really useful but sometimes you don't want a perfect circle. You want an ellipse instead. And for that, we have the clip path, ellipse method. Ellipse looks a little bit different from circle because we now have to work with both the X axis and the Y axis. So if we call in the ellipse method, we can now put in two values. The first one is the X axis or the horizontal axis. Let's set that to 25%. The second one is the Y axis. So the vertical axis, we can set that to 50% and then we get this very tall, ellipse instead of a circle. Once you've set this value up, you can again click on the polygon icon in Firefox developer tools, and you get helper tools to work with your ellipse. And here you see, we now have three points to work with. We have the y-axis, which is the second number, you can see it changes when I'm moving this, we have the x-axis, or the horizontal axis, which is the first…

Contents