Clip Path
Written By: Avinash Malhotra
Updated on:
CSS Clip Path
CSS Clip Path property create a specific clipping region and show them. The content outside is hidden. Its is also used to shape backgrounds.
clip-path can create circle, ellipse, polygon, path function or svg path.
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 us clip-path with at propreties to define position on x and y axis. By-default its 50% 50%.
<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 set elliptical path for clips. Use ellipse function with two parameters, first x axis, and second y axis.
<style>
.ellipse{
height:100px;
background:#f66;
clip-path: ellipse(50% 50%)
}
</style>
ellipse with at
we can also use at to change position of x or y axis. By-default its 50% 50%.
<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
clip-path polygon is used to draw any polygon clip using polygon function. polygon() function can have parameter like (x1 y1, x2 y2, x3 y3) and so on.
<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>