Masking some area of the site can be useful and very visually interesting. Sometimes that effect can be achieved using transparent PNG or SVG images, but sometimes it’s very useful and easy to use clip-path css property. clip-path makes it easy to clip-out basic shapes using either of the polygon, ellipse, circle or inset keywords.
At this time, clip-path still needs to be prefixed with -webkit- for it to work in Safari.
Polygon
Polygon is the most flexible of all the available shapes because it allows you to specify any amount of points, a little bit like an SVG path. Each point has it’s X and Y coordinates. Those coordinates can be specified using any unit (pixel or percent).
Best way to demonstrate how clip-path works is on the example. We’ll use our first image and make triangle, X-shape and a star shape.
|
1 2 3 4 5 6 7 8 9 10 11 |
/* Triangle */ -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* X-shape */ -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); /* Star shape */ -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); |
Circle
Circle is defined a little bit different circle(radius at posX posY). Defining the position is optional and default value for the circle is 50% 50%. Here are the two examples:
|
1 2 3 4 5 6 7 |
/* Circle */ -webkit-clip-path: circle(50%); clip-path: circle(50%); /* Custom circle shape */ -webkit-clip-path: circle(102.8% at 0 100%); clip-path: circle(102.8% at 0 100%); |
Ellipse
Ellipse is similar to a circle. Syntax for the ellipse is: ellipse(radiusX radiusY at posX posY). The position is optional and will default to 50% 50%. Here are the two examples:
|
1 2 3 4 5 6 7 |
/* Ellipse*/ -webkit-clip-path: ellipse(25% 40% at 50% 50%); clip-path: ellipse(25% 40% at 50% 50%); /* Custom ellipse shape */ -webkit-clip-path: ellipse(97% 61% at 0% 61%); clip-path: ellipse(97% 61% at 0% 61%); |
Inset
Using inset we can define an inner rectangle and everything outside will be cut-out. Inner rectangle can also be rounded with the round keyword and a border radius value.
|
1 2 3 4 5 6 7 |
/* Cropped image using inset */ -webkit-clip-path: inset(15% 10% 15% 10%); clip-path: inset(15% 10% 15% 10%); /* Cropped image with rounded corners */ -webkit-clip-path: inset(15% 10% 15% 10% round 10px); clip-path: inset(15% 10% 15% 10% round 10px); |
0 Comments