{"id":20802,"date":"2015-02-03T12:34:52","date_gmt":"2015-02-03T11:34:52","guid":{"rendered":"http:\/\/tympanus.net\/codrops\/?post_type=css_reference&p=20802"},"modified":"2020-02-07T07:05:21","modified_gmt":"2020-02-07T07:05:21","slug":"clip-path","status":"publish","type":"css_reference","link":"https:\/\/tympanus.net\/codrops\/css_reference\/clip-path\/","title":{"rendered":"clip-path"},"content":{"rendered":"
\n

The clip-path<\/code> property is used to specify a basic shape (<basic-shape><\/code><\/a>) or reference an SVG path (<clipPath><\/code><\/a>) to be used as a clipping path<\/strong><\/em> on the element.<\/p>\n

The element can be an HTML element or an SVG element. (See Syntax and Values sections.)<\/p>\n

Concepts and Terminology<\/h3>\n

What is “clipping”?<\/h4>\n

Clipping is a graphical operation that allows you to fully or partially hide portions of an element. The portions of the element that are shown or hidden are determined by a clipping path<\/em>.<\/p>\n

Clipping Paths & Regions<\/h4>\n

A clipping path<\/strong> can be either a basic shape or a vector path. This path defines a region (in the absence of anti-aliasing) where everything on the “inside” of this region is allowed to show through but everything on the outside is “clipped out” and does not appear on the canvas. This region is known as the clipping region<\/strong><\/em>.<\/p>\n

Conceptually, any parts of the element that lie outside of a clipping region are not drawn. This includes any content, background, borders, text decoration, outline and visible scrolling mechanism of the element to which the clipping path is applied, and those of its descendants.<\/p>\n

\"clipping-path\"
A clipping path (middle) is applied on a polygon shaded with different colors (left). This results in a “clipped out” shape (right). (Source<\/a>)<\/figcaption><\/figure>\n

A clipping path is conceptually equivalent to a custom viewport for the element it applies to. Thus, it affects the rendering of an element. It does not affect the element’s inherent geometry. The boundaries of a clipped element must remain the same as if it were not clipped. The element will affect the flow around it as it normally would, and every other element on the page will still see and treat the element as if it were still rectangular, even if it’s clipped to a non-rectangular shape. If you want to change the way the content around the element flows and have it respond to the defined shape of the clip path, you can use the shape-outside<\/code><\/a> property.<\/p>\n

If the clipping region exceeds the bounds of the user agent’s document window, content may be clipped to that window by the native operating environment.<\/p>\n

An element’s ancestors may also clip portions of their content (e.g., via their own clip<\/code><\/a> or clip-path<\/code> properties and\/or if their overflow<\/code><\/a> property is not visible<\/code>). What is rendered is the cumulative intersection.<\/p>\n

Clipping Regions and Pointer Events<\/h4>\n

The clip-path<\/code> property should restrict the areas of the element that accept pointer events to the clip path it defines\/references. Pointer events must not be dispatched on the clipped (non-visible) regions of a shape.
\nThis means that the element should not respond to pointer events like hover or click events even if it is hovered or clicked outside its visible region.<\/p>\n

Animating Clipping Paths<\/h3>\n

Clipping paths defined using basic shapes can be animated just like shapes defined for the shape-outside<\/code><\/a> property can.<\/p>\n

In short, a clipping path can be animated from one shape to another because it is made up of points. These points have coordinates that are either length or percentage values. And since lengths and percentages are animatable, shapes can be animated as well. So, basically, you’re animating the position of the points that make up a shape.<\/p>\n

However, note that you can animate one shape into another only by using the same shape function for the initial and final shape, because the initial and final shape must have the same number of points, otherwise the animation is not possible.<\/p>\n

For more information please see the shape-outside<\/code><\/a> property entry.<\/p>\n

Trivia & Notes<\/h2>\n

The deprecated clip<\/code><\/a> Property<\/h4>\n

Before the clip-path<\/code> property was introduced, in CSS 2.1, the clip<\/code><\/a> property was used to clip parts of an element, similar to the way clip-path<\/code> works.<\/p>\n

However, the clip<\/code><\/a> property was very limited: the only supported clipping shape was a rectangle shape created using the rect()<\/code> function.<\/p>\n

Moreover, clip<\/code><\/a> only worked on absolutely-positioned element, which limites its use a lot. Even in SVG, it was limited to specific elements as well.<\/p>\n

These reasons, among others, are why the clip-path<\/code> property was added to the SVG specification and then adapted by the CSS Masking module today.<\/p>\n

If you’re interested, you can read more about the clip<\/code><\/a> property in its entry.<\/p>\n

Using clip-path<\/code> with CSS Shapes<\/h4>\n

The clip-path<\/code> property is a great companion to the CSS Shapes properties, particularly the shape-outside<\/code><\/a> property.<\/p>\n

Using shape-outside<\/code><\/a> you can change the way content flows around an element because the shape applied using shape-outside<\/code><\/a> changes the geometry of the element’s float area. However, the shape does not change anything else about the element, like backgrounds and borders and such. This means that any borders and background images will not adapt to the shape created on the element. So, even though the element’s float area changes, the content around the element may end up being on top of the element’s background image.<\/p>\n

\"text-over-shape\"
An example showing the result of changing the float area of an element using the shape-outside<\/code> property. The background area of the element remains unchanged, resulting in the text overlapping it and therefore getting an unwanted result.<\/figcaption><\/figure>\n

In order “clip” the background of the element to match the defined shape, you can use the clip-path<\/code> property. All you have to do is pass in the same shape function that you used in the shape-outside<\/code><\/a> property to the clip-path<\/code> property, and the element’s background image will then be clipped to the defined shape, resulting in a more defined shape altogether.<\/p>\n

\"shape-clipped\"
The result of using the clip-path<\/code> property to visually define a CSS Shape applied using shape-outside<\/code><\/a>.<\/figcaption><\/figure>\n

You can read more about CSS Shapes and using clip-path<\/code> with them in the shape-outside<\/code><\/a> property entry, and see the above demo live in the Examples section below.<\/p>\n<\/div>\n

\n

Official Syntax<\/h2>\n