Masking some area of the site can be useful and very visually interesting. Sometimes that effect can be achieved using transparent PNG or SVG images, but sometimes it’s very useful and easy to use clip-path css property. clip-path makes it easy to clip-out basic shapes using either of the polygon, ellipse, circle or inset keywords.

Polygon

Polygon is the most flexible of all the available shapes because it allows you to specify any amount of points, a little bit like an SVG path. Each point has it’s X and Y coordinates. Those coordinates can be specified using any unit (pixel or percent).
Best way to demonstrate how clip-path works is on the example. We’ll use our first image and make triangle, X-shape and a star shape.

Circle

Circle is defined a little bit different circle(radius at posX posY). Defining the position is optional and default value for the circle is 50% 50%. Here are the two examples:

Ellipse

Ellipse is similar to a circle. Syntax for the ellipse is: ellipse(radiusX radiusY at posX posY). The position is optional and will default to 50% 50%. Here are the two examples:

Inset

Using inset we can define an inner rectangle and everything outside will be cut-out. Inner rectangle can also be rounded with the round keyword and a border radius value.