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: Inset
- [Instructor] If you need to clip your image to a rectangle shape, you can use the clip-path function called inset. And I know that sounds weird, because inset doesn't sound like rectangle, but if you think about what is happening, it actually makes a lot of sense. The inset property allows you to inset the clip path from first the top border down, then the right border in, the bottom border up and, finally, the left border in. And you can also set rounded corners on this. So let's see what that looks like. First, I say, "clip-path," as before, "inset," and then I define how much I want to inset each of these borders. So, from the top here, let's say I want to inset it by 20%. So I'll say 20%. When I do this with just one value, the 20% are applied all around, just like we do with borders and margins and everything else. So now it's been inset by 20%, meaning the clip path is sitting 20% in from each of the…
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
-
-
-
-