clip-path

The clip-path property in CSS allows you to specify a specific region of an element to display, with the rest being hidden (or “clipped”) away.

.clip-me {  
  /* Example: clip away the element from the top, right, bottom, and left edges */
  clip-path: inset(10px 20px 30px 40px); /* or "none" */
  
  /* Example: clip element into a Heptagon */
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);

  /* Deprecated version */
  position: absolute; /* absolute or fixed positioning required */
  clip: rect(110px, 160px, 170px, 60px); /* or "auto" */
  /* values descript a top/left point and bottom/right point */
} 

There used to be a clip property, but note that is deprecated.

The most common use case would be an image, but it’s not limited to that. You could just as easily apply clip-path to a paragraph tag and only a portion of the text.

<img class="clip-me" src="/images/image-to-be-clipped.png" alt="Descriptioin of image">

<p class="clip-me">
  I'll be clipped.
</p>

Those four values in inset() (in the CSS above) represent the top/left point and the bottom/right point, which forms the visible rectangle. Everything outside of that rectangle is hidden.

Other possible values:

.clip-me { 
  /* referencing path from an inline SVG  */
  clip-path: url(#c1); 

  /* referencing path from external SVG */
  clip-path: url(path.svg#c1);

  /* polygon */
  clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

  /* circle */
  clip-path: circle(30px at 35px 35px);

  /* ellipse */
  clip-path: ellipse(65px 30px at 125px 40px);

  /* inset-rectangle() may replace inset() ? */
  /* rectangle() coming in SVG 2 */

  /* rounded corners... not sure if a thing anymore */
  clip-path: inset(10% 10% 10% 10% round 20%, 20%);

}

Example SVG clip path:

<clipPath id="clipping">
  <circle cx="150" cy="150" r="50" />
  <rect x="150" y="150" width="100" height="100" />
</clipPath>

The clip-path property also supports the path() function, which makes clipping elements into shapes extremely easy. The CSS path() function enables us to create complex paths, polygons and other shapes using SVG path command syntax.

.hello {
  width: 200px;
  height: 200px;
  background-color: aqua;
  clip-path: path("M200 78c0 42-45 77-100 77-7 0-14 0-21-2l-44 47 12-57C18 129 0 104 0 78 0 35 45 0 100 0s100 35 100 78Z");
}

Make Your Own

Here’s a really neat editor for those from Mads Stoumann (which works for circles and ellipses as well):

Related Tricks!

Browser Support

Related