DEV Community

Cover image for CSS clip-path, what the heck?
Romain Trotard
Romain Trotard

Posted on

CSS clip-path, what the heck?

Welcome to my first CSS's article, I propose to talk about clip-path property. This will allow you to do a multitude of things that we will see here.

It's something that enables to you a lot of things we are going to see here.

Quick presentation

The clip-path property makes it possible to you to do any fancy shape you have in mind and extract it from image, div, ...
The content inside the clip-path will be shown, while those outside will be hidden.
When you are clipping an element, only the visible part will trigger events (click, hover, ....) which is really cool.

For example, it's possible to do some avatar:

Avatar

#avatar {
  clip-path: circle(50%);
}
Enter fullscreen mode Exit fullscreen mode

Star

#star {
  width: 100px;
  height: 100px;
  background-color: red;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}
Enter fullscreen mode Exit fullscreen mode

How to make shapes?

You may have seen in my previous examples two ways to do make some shape. Before seeing each way to do that, let's see the coordinate system.

Coordinate system

An image is better than words:

Coordinate system

As you can see the origin is at the top-left corner of the element, the x-axis going right and the y-axis going down.

Note: You can use every measurement unit. If you use %, the values are relative to the size of the element. Personally I find it better to use % because it will keep the right proportion in relation to the element.


circle()

One of the possible value to clip-path is circle(). You can define the radius and the position of the center with the following syntax:

clip-path: circle(50px at 100px 100px);
Enter fullscreen mode Exit fullscreen mode

Notes: The default position is at center.

Circle example


ellipse()

It's also possible to make ellipse thanks to ellipse(). You have to define x-radius and y-radius, and can also set the position of the center. The syntax is:

clip-path: ellipse(100px 50px at 0 0);
Enter fullscreen mode Exit fullscreen mode

Ellipse example

If you want the ellipse to take all the element area, you have access to two specific values to make it easier:

  • closest-side: Take the size from the center to the closest border.
  • farthest-side: Take the size from the center to the farthest border.

inset()

Another possibility is to define an inset rectangle with inset(). You can define offsets from side of the element (same format than margin) and rounded corner using the round keyword (same format than border-radius).

Inset example


polygon()

The polygon() enables us to define a list of vertices to create shape. The syntax is:

clip-path: polygon(
    33% 0,
    66% 0,
    100% 33%,
    100% 66%,
    66% 100%,
    33% 100%,
    0 66%,
    0 33%
  );
Enter fullscreen mode Exit fullscreen mode

Note: Each couple represents a point.

Polygon example

Note: Firefox gives you a useful tools to edit in the browser the polygon value:

Polygon tool in Firefox


path()

You can also define a shape with SVG path with the path() value.
I'm not gonna explain how to build an SVG path, because not gonna lie, I just learned how to draw some curves this morning to make the example ^^
But I think I'm gonna try hard this because we can do some crazy things with SVG and animation.
Here is an example:

clip-path: path(
  "M 50 175 L 0 100 Q 25 50 50 100 Q 75 50 100 100"
);
Enter fullscreen mode Exit fullscreen mode

And with the full css we can get:

#heart {
  width: 100px;
  height: 200px;
  background-color: red;
  clip-path: path(
    "M 50 175 L 0 100 Q 25 50 50 100 Q 75 50 100 100"
  );
}
Enter fullscreen mode Exit fullscreen mode

Path example

Note: Yep I agree, not so good but pretty satisfied. Don't be too hard with me please :)

Note: It's also possible to reference an SVG clipPath element with the url() value.

<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="svgHeart">
      <path d="M 50 175 L 0 100 Q 25 50 50 100 Q 75 50 100 100"
            stroke="black" fill="red" />
    </clipPath>
  </defs>
</svg>

<div id="heart"></div>
Enter fullscreen mode Exit fullscreen mode
#heart {
  width: 100px;
  height: 200px;
  background-color: red;
  clip-path: url(#svgHeart);
}
Enter fullscreen mode Exit fullscreen mode

Some examples

Now that you know the theory let's see some examples of what you can do with it.

Christmas tree

Christmas is coming soon, so let's make a Christmas tree to put your presents under it.

Transition

Here is an example of what you can do when combining with an animation.


Conclusion

So I hope you liked this CSS article about clip-path and see the power that it can give you.
I decided not to talk about the feature which can give you the possibility to defines the reference box for the shapes (by default border-box). Because, for the moment, just Firefox manages this new feature.


Do not hesitate to comment and if you want to see more, you can follow me on Twitter or go to my Website.

Discussion (2)

Collapse
jzombie profile image
jzombie

Thanks for this article!

Was just working with some clipping myself a few minutes ago, and this happened to be the first thing in my feed when I logged on.

Collapse
romaintrotard profile image
Romain Trotard Author

Oh nice :)