Digital Tools,  Web Development

Cutting images or making complex shapes using CSS

CSS Clip Path Maker is a tool allowing you to make complex shapes using CSS clip-path property by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.

CSS Animations and transitions are possible with two or more clip-path shapes with the same number of points.

Example:

div.classname {
clip-path: inset(0 15% 1% 35%);
position: relative;
left: -150px;
top: 30px;
}

For more information:

https://www.bennettfeely.com/clippy/