From the course: CSS: Images

Unlock this course with a free trial

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

Custom shapes using clip-path

Custom shapes using clip-path

From the course: CSS: Images

Start my 1-month free trial Buy for my team

Custom shapes using clip-path

“

- [Instructor] Circles are great for many designs but there are other times when you need a different shape. Maybe a triangle or a square turned on its side like you see here, or some other shape entirely. For those purposes, you can clip your image using CSS with the help of the clip-path property. Clip-path allows you to define a path and then click the image based on that path. It can be a circle, an ellipses, a polygon or a drawn path, and it can even be a path to find an SVG that you then import into the image and clip your element based on it. Clip-path path is very powerful and it also has a lot of options. So in the next couple of movies, we'll go through each of the options and details so you know how to use them to get the shape you want out of your image.

Contents