What is a CSS clip-path?
The clip-path property is used to an image placed on the object such that part of it can be used for clipping (removal). The area inside the shape is filled with content, and the area outside the shape is not painted. Using a reference coordinate system called user space coordinates, you may establish a path using lines, arcs, or curves, and then define how the image is used for its edges. The negative regions are then clipped out and not shown, while the positive regions are shown to the viewer.
Thanks Shahzebh. Will go through the reference link