clip-path with polygon() and circle()
Clip elements into custom polygon or circle shapes using the clip-path property.
What is clip-path?
clip-path clips the visible area of an element to a specified shape. Everything outside the shape is invisible (but still takes up space in the layout).
clip-path: circle()
Clip an element to a circular shape. The argument is the radius:
.avatar {
clip-path: circle(50%);
/* clips to a perfect circle */
}
.badge {
clip-path: circle(40px at 50% 50%);
/* 40px radius circle centered */
}All lessons in this course
- clip-path with polygon() and circle()
- shape-outside for Text Wrapping
- Animating clip-path Shapes
- CSS Masks vs Clip-path