Clip-Path Polygons Explained

After a long weekend off-grid, camping in the Cascades, I’m back in the office playing with CSS and clip-path polygons.  I started out following the article/tutorial by Drew Minns, along with the CodePen.  As I was wanting to just learn how clip-path polygons are constructed I made minor changes to the original, which you can see here.

Clip Path in Navigation

I also like the idea of using clip-paths applies to images as thumbnails or even navigation:

Clip-Path Navigation 2

(I used CSS blending mode markup for the hover effect on the first image).  The beauty of using clip-path is that the images can be easily changed out without needing manual editing.  They could even be dynamic.

What is Clip-Path?

The clip-path property in CSS allows you to specify a specific region of an element to display, rather than showing the complete area. ~ CSS-Tricks 

In the example above the clip-path polygon makes the triangular indents about the navigation item when hovered over.  In the next image the clip-path polygon is applied to trim parts of an image to create a comic-style text bubble.

Clip-Path used as bubble.

How Do I Create a Clip-Path Polygon?

The clip path is a series of coordinate pairs, each pair separated by commas.  It took me awhile to get my head around it, and this is how I envision it.

Coordinates are grouped as X Y pairs where X is horizontal axis and Y the vertical axis.

ex1

Starting at the upper right corner, the coordinates would be X0 Y0 or 0 0.  The distance away from the start point increased up to 100%.  The bottom right corner’s coordinate is X100% Y100% or 100% 100%.

ex2

If I were going to create a square box my clip-path would look like this: clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%).  Or, in visual terms:

Clip Path Example

Note that the end of a line is also the beginning of the new line – this is automatic so you don’t have to repeat it.  The object you are drawing always wants to be closed, so the last coordinate you give it will create a line to the very first coordinate of the path.

Clip-Path Returns to Start

Where it gets fun is when you are creating shapes.  For example, here is the clip-path for the x shape hover in the first picture of this article:

clip-path: polygon(50% 20%, 70% 0, 100% 0,100% 20%,80% 50%,100% 80%, 100% 100%, 70% 100%, 50% 80%, 30% 100%, 0 100%, 0 80%,20% 50%,0 20%, 0 0, 30% 0);

If you take some time you can see that it comes out like this in words:

  • Start at the point defined by X50% Y20% and go to X70% Y0
  • From there go to X100% Y0
  • From there go to X100% Y20%
  • and so on…

What Other Clip-Paths are there?

Besides polygon you can define a circle, ellipse and inset rectangle using clip-path.  See clip-path on WPD for more information.

What Browsers Support Clip-Path?

For webkit browsers you’ll need to use a prefix.  This is the CSS markup I generally use:

-webkit-clip-path: polygon(…);
clip-path: polygon(…);

Browser support also depends on the shape.  Polygons are supported by all current browsers except IE (of course).  The circle clip-path is only supported in Chrome, Opera and Safari.  See here for more information.  Fortunately it deprecates well for IE – the image will just be shown as a regular box.

Diane Ensey
Follow me

Diane Ensey

Programming Diva and CEO at Beyond Paper
For more than 10 years I've been making websites work for clients world-wide using WordPress, Google Maps, forms and custom applications. You can see my work portfolio and case studies at Beyond Paper.
Diane Ensey
Follow me

Trackbacks/Pingbacks

  1. Google Maps, Clip-Path, The Brain and More - Beyond Paper - […] found Clip Path tool that makes it easy to generate the coordinates.  I already talked about it here and you…

Submit a Comment