Clip paths in CSS

The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

It mostly takes one <basic-shape> value, which can be one:

• one of multiple shapes, e.g. circle, rect, ellipse
• polygon which uses a SVG filling rule and a set of vertices
• path which uses a SVG path definition
• shape which uses shape commands for lines, curves, and arcs

shape is a bit more robust than path as it allows percentage values and CSS units, which ultimately leads to a more responsive clip path. https://developer.chrome.com/blog/css-shape

You can also use a SVG as a clip path source with url.

Note that the old keyword used to be clip, but that's now deprecated.

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

[[css]]