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
- [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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
Rounded corners with border-radius3m 23s
-
Cropping images to a perfect circle2m 37s
-
Custom shapes using clip-path44s
-
Clip-path: Circle3m 2s
-
Clip-path: Ellipse1m 36s
-
Clip-path: Polygon4m 33s
-
Clip-path: Inset2m 6s
-
Clip-path: Path2m 50s
-
Custom shapes using SVG4m 51s
-
Masking an image with another image2m 38s
-
Image text1m 48s
-
Browser compatibility3m 30s
-
-
-
-