Understanding CSS clip-path

The world of CSS just keeps getting better as new specs are introduced and eventually adopted by major browsers. One of those exciting specs is CSS Masking. While not fully supported across the major browser line up, it’s an interesting addition that’s generating a lot of attention. One absolutely outstanding example of what can be achieved with css masking is a project by Bryan James - Species in Pieces that showcases a collection of endangered species, made and animated using clip-path. 

Defined in the CSS Masking Module Level 1 spec, CSS masking provides two ways to hide sections of full images or objects: masking and clipping. Masking allows the use of another element to create a luminance or an alpha mask. Clipping simply provides a mechanism to only show a certain section of an object. Think of it as taking scissors and cutting a part of a piece of paper into a shape you want. 

In this post, I want to explore specifically the clip-path property and show a quick example of what can be achieved by it. 

clip-path allows for two main ways to clip an object - via an SVG source, or via a basic shape. I will focus on basic shapes for the purposes of this write up. 

First, let’s look at the basic syntax for clip-path:

clip-path: polygon(<X1 Y1>, <X2, Y2> … );
clip-path: circle(<radius>, <Center X, Center Y>); 

Let's play around with the shapes. The following CSS is used to produce the four very colorful shapes below (irrelevant CSS and HTML omitted). 

CSS

#triangle {
    -webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

#square {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

#hexagon {
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

#circle {
    -webkit-clip-path: circle(50% at 50% 50%);
}

Result

So what else can be achieved with the clip-path property? Well, you could create a CSS-based chevron menu like the one below. 

Define
Design
Develop

clip-path's uses are endless. I am always amazed to see all the different ways how people apply this wonderful CSS feature. 

Currently, clip-path has partial support across all browsers. Support for the use of clip-path with basic shapes is limited to:

  • Chrome 31+
  • Safari 7+
  • Opera 29+
  • iOS Safari 7.1+
  • Android Browser 4.4+
  • Chrome for Android 42+

Given the usefulness of CSS masking and clipping, I see this amazing feature getting full adoption without prefixes across all the major browsers in the near future. 

I'm curious to see how others are using CSS masking. Feel free to share success stories and creative uses in the comments section.