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:
- Element has to be positioned as absolute.
- 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