DEV Community

Vinod Godti
Vinod Godti

Posted on

1 3

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%);
}
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

Neon image

Serverless Postgres in 300ms (❗️)

10 free databases with autoscaling, scale-to-zero, and read replicas. Start building without infrastructure headaches. No credit card needed.

Try for Free →

Top comments (0)

ACI image

ACI.dev: The Only MCP Server Your AI Agents Need

ACI.dev’s open-source tool-use platform and Unified MCP Server turns 600+ functions into two simple MCP tools on one server—search and execute. Comes with multi-tenant auth and natural-language permission scopes. 100% open-source under Apache 2.0.

Star our GitHub!

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay