Fun with Clip-paths

Scroll Down

Written by Chris Wright

June 22, 2016

Fun with Clip-paths

The clip-path CSS property allows you to only display a part of an element. In Photoshop, this is called masking. In general, this is used to show or hide a part of an image, but you can use on p tagss and div tags as well. You could use this to shape divs. Say you have a crazy design to match and can’t just use a square-shaped element, clip-path is great. Clip-path is also helpful if you don’t want everything on your site to just be an image or SVG.

Note that there used to be a clip property, but that is mostly deprecated and clip-path is what should now be used

There are several different ways to use clip-path. The one I am most familiar with is clip-path: polygon(). This allows you to use different grid points to specify which part of the image or element you want to display.

You can think of the points you are using as the X and Y axis, so when you use:

clip-path: polygon(0 0);

your first point will be at left:0; and top:0;. You can pass percentages or pixel values into this. Also, you separate your points by using commas. So, if I were to do:

clip-path: polygon(0 0, 0 100px, 100px 100px, 100px 0);

that would display a box 100px wide and 100px tall.

Here is how to make a simple square:

See the Pen Clip-path Square by Chris Wright (@chreeswright) on CodePen.

Here is how to make a simple triangle:

See the Pen Clip-path Triangle by Chris Wright (@chreeswright) on CodePen.

Here is an Octagon:

See the Pen Clip-path Octagon by Chris Wright (@chreeswright) on CodePen.

And lastly, here is an example of a more complex use of  clip-path:

See the Pen HTML 5 Logo in Pure CSS by Chris Wright (@chreeswright) on CodePen.

 

### Browser Support Any version of Chrome, Safari and Firefox is supported, Opera is 7+, IE is 8+, Android ? and IOS is 2+