CSS clip-path property and it's advantages

CSS clip-path property is very useful when designing the landing pages and the latest web page design.clip-path to show some portion of the image or shape instead of showing the entire shape or image.

let's dive into details

Basic Shapes

clip-path has basic-shape values such as circle, ellipse, polygon or inset to make some basic shapes circle, ellipse, polygon or rectangle respectively.
clip-path property works only when there should be basic shape or image. On top of the basic shape or image, we can clip some path out to create many new shapes.

.circle{
    width:100px;
    height:100px;
    background:#AD2F11;
    clip-path:circle(50%)
}

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

Advance shapes

Now let's take one more step ahead to make trapezoid shape using clip-path

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

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

For some old version browsers, we should use a vendor-specific prefix on clip-path such as -webkit-,-moz,-o- for Chrome, Mozilla and opera respectively.

Circle clip-path syntax can be defined also like this

clip-path: circle(radius at posX posY)

.circle-advanced{
    clip-path:circle(50% at 70% 20%)
}

Ellipse also be defined as

clip-path: ellipse(radiusX radiusY at posX posY)

.ellipse-advanced{

    clip-path:ellipse(50% 65% at 70% 50%);
}

Find the codepen below to play with the above examples

To explore more advanced CSS clip-path, visit the below URL.

clipy