Interactive CSS Clip Paths

Did you know that on Chrome you can specify complex clip paths for your content very easily using the clip-path CSS property?

With the standard clip property, you can specify a rectangular clipping area for absolutely positioned elements, as in:

mycontent: {
   position: absolute;
   clip: rect(5px, 100px, 100px, 5px);
}

If you ask me, that’s of pretty limited use.

With the clip-path property (-webkit-clip-path on Chrome) however, you can specify any of the following 4 basic shapes for clipping:

  • rectangle(<top>, <left>, <width>, <height>, <rx>, <ry>)  – rectangle with a top, left, width, height and optional rounded corner radii
  • circle(<cx>, <cy>, <r>) – circle with a center and radius
  • ellipse(<cx>, <cy>, <rx>, <ry>) – ellipse with a center and x and y radii
  • polygon(<x1> <y1>, <x2> <y2>, …, <xn> <yn>) – polygon with a list of points

The following Pen uses the polygon option to let you interactively set the clipping on some content.  Try clicking on the image near one of the points of the clipping polygon.  The nearest clip point will track your mouse until you click again:

Check out this Pen!

You can also specify a complex clip path in some SVG content and then reference that path using:

clip-path: url(#svg-clip-path);
Check out this Pen!

Don’t forget to click on the different tabs to switch between HTML, CSS and the end result!

The creative possibilities here are endless…

It’s important to note though that:

(-webkit-)clip-path: shape

is only supported on Chrome at present, but:

clip-path: url(#svg-path)

is also supported on Firefox.

Keeping track of what’s supported where is a little tedious at best, so I’ve created the following Github repo to help keep track of the various CSS Graphics standards and in what configurations they’re supported on what browser.  Please help keeping that project up to date!

https://github.com/awgreenblatt/css-graphics

This stuff is pretty straightforward and very useful.  I can’t imagine not seeing this show up in more browsers before too long.

Tagged , , , . Bookmark the permalink.

11 Responses to Interactive CSS Clip Paths

  1. Šime Vidas says:

    Browser support:

    1. -webkit-clip-path: Supported in Chrome and Opera. Support also coming with Safari 7 and 6.1.

    2. Firefox supports the clip-path: notation (unprefixed), but not the shape function values.

  2. Pingback: | wsp-web

  3. Pingback: The Web Just Got A Whole Lot More Awesome | ANDREW TRICE

  4. Dominik says:

    Thank you very much, I will try this out 🙂

  5. shawnXiao says:

    I found that the Chrome does not support the mask and clip-path with url value.

    • agreenblatt says:

      If you want to getting masking and the clip path working in a Webkit based browser, you need to use the -webkit- prefix. Try using -webkit-mask and -webkit-clip-path respectively. That should do the trick.

  6. Jozsef says:

    Really cool stuff. I wonder if the element on what the clip-path is used needs to be absolutely positioned in order to work.

    Does the clip-path work on div elements also, in a way to hide anything inside of it that falls between the paths parameters (text, images) and to show what is behind the div?

Leave a Reply

Your email address will not be published. Required fields are marked *