Clip Path

CSS Clip Path

CSS Clip Path

CSS Clip Path property create a specific clipping region that sets what part of an element is visible. The part of the element that is inside the region is shown, while the part outside is hidden (or clipped).

clip-path can create circle, ellipse, polygon, path function or svg path.

The CSS clip-path property creates a clipping region that sets what part of an element is visible. The part of the element that is inside the region is shown, while the part outside is hidden (or clipped).

clip-path can create shapes using basic shape functions like circle(), ellipse(), polygon(), or by referencing an SVG path with url().

Clip Path Circle

Clip-path circle set create circular clipping region.

<style>
     .circle{ 
          height:100px;
          background:#f66;
          clip-path: none
     }
</style>

circle with at

We can also use clip-path with the at keyword to define the position of the circle's center on the x and y axes. By default, it's 50% 50% (the center of the element).

<style>
    .circle{ 
         height:100px;
         background:#f66;
         clip-path: circle(50px at 0% 50%)
    }
</style>

<style>
    .circle{ 
         height:100px;
         background:#f66;
         clip-path: circle(50px at 100% 0%)
    }
</style>

Clip Path ellipse

Clip-path ellipse creates an elliptical clipping region. The ellipse() function takes two radius parameters (for the x-axis and y-axis) and an optional position.

<style>
    .ellipse{ 
         height:100px;
         background:#f66;
         clip-path: ellipse(50% 50%)
    }
</style>

<style>
    .ellipse{ 
         height:100px;
         background:#f66;
         clip-path: ellipse(50% 50% at 0% 50%)
    }
</style>

<style>
    .ellipse{ 
         height:100px;
         background:#f66;
         clip-path: ellipse(50% 50% at 50% 0%)
    }
</style>

Polygon

The polygon() function for clip-path is used to create a custom shape by defining a set of vertices (coordinate pairs). You need at least three pairs to create a shape.

    <style>
        .polygon{ 
             height:100px;
             background:#f66;
             clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
        }
    </style>
    

    <style>
        .polygon{ 
             height:100px;
             background:#f66;
             clip-path: polygon(0% 100%, 25% 0%, 75% 0%, 50% 100%);
        }
    </style>
    

    <style>
        .polygon{ 
             height:200px;
             background:#f66;
             clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%)
        }
    </style>