DEV Community

loading...

CSS clip-path property and it's advantages

Godti Vinod
I am coding geek ,interest learning new technologies in web and mobile app development.My technology stack is JavaScript | React | React Native | Node/Express | Mysql/MongoDb.
・2 min read

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%);
}
Enter fullscreen mode Exit fullscreen mode

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%);
}
Enter fullscreen mode Exit fullscreen mode

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%)
}
Enter fullscreen mode Exit fullscreen mode

Ellipse also be defined as

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

.ellipse-advanced{

    clip-path:ellipse(50% 65% at 70% 50%);
}
Enter fullscreen mode Exit fullscreen mode

Find the codepen below to play with the above examples

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

clipy

Discussion (0)