From the course: CSS: Images
Unlock this course with a free trial
Join today to access over 22,600 courses taught by industry experts.
Clip-path: Polygon
- [Instructor] If you need a clip path that is a triangle or a square turned on its side or any other shape that has straight lines and coordinate points, you can use a polygon. When you define a polygon, you set the coordinates for each point, and then the polygon will draw a line between point and point and point and point until you get the polygon you want. The polygon is defined using the polygon method. And here you have to define at least three points because otherwise you don't have an area in which there can be a clip path. The points are defined by setting their X and Y position, and you can do this using pixel values or ems or percentages. In most cases, if you're working in a responsive environment, you want to use percentages. So let's just set up three random points here. So I'll say 25% and 50. So this would be the first point. So now it's 25% in from the left-hand side and 50 down from the top. Then, I…
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
-
(Locked)
Cropping images to a perfect circle2m 37s
-
(Locked)
Custom shapes using clip-path44s
-
(Locked)
Clip-path: Circle3m 2s
-
(Locked)
Clip-path: Ellipse1m 36s
-
(Locked)
Clip-path: Polygon4m 33s
-
(Locked)
Clip-path: Inset2m 6s
-
(Locked)
Clip-path: Path2m 50s
-
(Locked)
Custom shapes using SVG4m 51s
-
(Locked)
Masking an image with another image2m 38s
-
(Locked)
Image text1m 48s
-
(Locked)
Browser compatibility3m 30s
-
-
-
-