Applying clipping to elements in CSS

The clip property is deprecated now. The new, recommend version of applying clipping to elements in CSS is clip-path.

Clip property has two significant weaknesses:

1. Element has to be positioned as absolute.
2. Clip can only do rectangles.

The clip-path property solves the weaknesses. The clip-path property can be applied to all HTML elements and SVG container elements. The clip-path property takes any graphical element from SVG or basic shapes from CSS and uses them as clipping region.

The clip-path property do not require any SVG markup. You can use basic shapes from CSS. They were added to clip-path to provide easy shorthand functions for simple clipping operations.

• inset(top right bottom left [ round border-radius ]?)
• circle(r? [ at position ]?)
• ellipse(rx ry? [ at position ]?)
• polygon(x1 y1, x2 y2, ..., xn yn)

Animating/Transitioning clip-path

Basic shapes can be animated. The following example uses hover effect. Animation of basic shapes works fine when it is applied to the same shape.

Resources

Clippy - CSS clip-path maker