Css Clip-path

The clip-path property in CSS is a powerful tool that allows you to define a specific region of an element to display, effectively "clipping" the rest of the element. This can be used to create various shapes and mask effects, enhancing the visual appeal and creativity of your web design.

Basic Shapes

Rectangle

Clips the element into a rectangle shape

 
.rectangle {
     clip-path: inset(10% 20% 30% 40%)
}
 

This creates a diamond shape by specifying three points.

Circle

Clips the element into a circular shape

 
.circle {
    clip-path: circle(50%);
}
 

This creates a circular clip with a radius of 50% of the element's size.

trapezium

Clips the element into a trapezium shape

 
.trapezium {
      clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}
 

This creates a diamond shape by specifying four points.

Triangle

Clips the element into a Triangle shape defined by a series of points.

 
.triangle {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
 

This creates a diamond shape by specifying three points.

Polygon

Clips the element into a polygonal shape defined by a series of points.

 
.polygon {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
 

This creates a diamond shape by specifying four points.