The CSS property clip-path
allows you to define a visible region of an element. Anything inside the region is visible but anything outside is hidden. There are numerous ways to define a clip-path
clipping region like with circle()
and using SVGs.
Currently, there is some browser support for clip-path
. A -webkit-
prefix is required for some browsers. Sadly, it seems that the IE and Edge browsers do not support it yet. https://caniuse.com/#search=clip-path.
Lets jump into the playground.
Circle
circle()
defines a circular clipping region on the element. Providing a single length value (percent, px, em) places the circle in the center.
Clip Path
.content {
-webkit-clip-path: circle(0%);
clip-path: circle(0%);
}
The position of the circle can be specified as well. As an example, circle(20% at 30% 70%)
means the circle starts 30% from the left and 70% from the top.
Clip Path
.content {
-webkit-clip-path: circle(0% at 50% 50%);
clip-path: circle(0% at 50% 50%);
}
Ellipse
ellipse()
defines a elliptical circular clipping area. It accepts 2 length values which represent its horizontal radius and vertical radius respectively.
Clip Path
.content {
-webkit-clip-path: ellipse(20% 70%);
clip-path: ellipse(20% 70%);
}
Like circle()
an ellipse starting position can be specified.
Clip Path
.content {
-webkit-clip-path: ellipse(40% 10% at 50% 50%);
clip-path: ellipse(40% 10% at 50% 50%);
}
Inset
inset()
defines an inset rectangle clipping area. It takes 4 different values which represent its top
, right
, bottom
and left
side offsets. The widget below describes it better.
Clip Path
.content {
-webkit-clip-path: inset(5px 5px 5px 5px);
clip-path: inset(5px 5px 5px 5px);
}
Interestingly, a border radius can be applied to the inset rectangle by specifying its roundness. An example like inset(5px 5px 5px 5px round 50px)
creates an inset rectangle with a border radius of 50px.
Clip Path
.content {
-webkit-clip-path: inset(5px 5px 5px 5px round 10px);
clip-path: inset(5px 5px 5px 5px round 10px);
}
Polygon
polygon()
lets you choose a series of points to define a clipping area shape. Points are defined as comma separated sequences of X
and Y
coordinates. The example below draws a simple editable triangle.
Clip Path
.content {
-webkit-clip-path: polygon(33% 33%, 33% 66%, 66% 66%);
clip-path: polygon(33% 33%, 33% 66%, 66% 66%)
}
If you’re looking for a cool tool to make polygon()
clip paths, I’ve come across this useful clip path maker tool https://bennettfeely.com/clippy/.
SVG’s with clip-path
Before, we used just simple shapes to create a clipping path. SVG’s can be used as well. With the use of the url()
CSS function, a clipping path element can the selected from a svg clipPath. I have a few example SVG’s in the HTML of this playground.
Clip Path
.content {
-webkit-clip-path: url(#heart);
clip-path: url(#heart);
}
Animating Clip Paths
clip-path
works wonderfully with CSS animations. Below are some examples of animating clip paths. The first one has a growing and shrinking circle()
.
Clip Path
.content {
animation: clip 1.2s ease-in-out infinite alternate;
}
@keyframes clip {
0% {
-webkit-clip-path: circle(20%);
clip-path: circle(20%);
}
100% {
-webkit-clip-path: circle(40%);
clip-path: circle(40%);
}
}
Here is another example with animating polygon()
.
Clip Path
.content {
-webkit-clip-path: polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%);
clip-path: polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%);
animation: clip 3s ease-in-out infinite;
}
@keyframes clip {
25% {
-webkit-clip-path: polygon(35% 15%, 65% 15%, 75% 85%, 25% 85%);
clip-path: polygon(35% 15%, 65% 15%, 75% 85%, 25% 85%);
}
50% {
-webkit-clip-path: polygon(20% 30%, 40% 10%, 80% 70%, 60% 90%);
clip-path: polygon(20% 30%, 40% 10%, 80% 70%, 60% 90%);
}
75% {
-webkit-clip-path: polygon(60% 10%, 80% 40%, 40% 90%, 20% 70%);
clip-path: polygon(60% 10%, 80% 40%, 40% 90%, 20% 70%);
}
}
Yeah, I know it’s pretty unreadable. When you animate clip-path
using polygon()
, each individual polygon point is animated individually each keyframe. This gives animating polygon()
a ton of power and flexibility for any type of shape.
Conclusion
clip-path
is a great way of selectively displaying parts of an element. There are many simple shapes like circle()
and inset()
but the polygon()
function allows for complex shapes. With the knowledge I gained while making this playground, I can imagine some fancy website home page designs using clip-path
. I hope you enjoyed this as much as I did making this playground.