CSS clip-path
The clip-path property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.
1. Basic Shapes
You can use shape functions to define the clipping region.
circle()
Defines a circle.
- Syntax:
circle(radius at position)
.clip-circle {
clip-path: circle(50%); /* Circle with radius 50% of element */
clip-path: circle(100px at center);
}ellipse()
Defines an ellipse.
- Syntax:
ellipse(radius-x radius-y at position)
.clip-ellipse {
clip-path: ellipse(50% 20% at 50% 50%);
}inset()
Defines an inset rectangle.
- Syntax:
inset(top right bottom left round border-radius)
.clip-inset {
/* 10px from top/bottom, 20px from left/right */
clip-path: inset(10px 20px);
/* With rounded corners */
clip-path: inset(10px round 5px);
}polygon()
Defines a polygon using x/y coordinates. This is the most flexible shape.
.clip-triangle {
/* Top-center, Bottom-right, Bottom-left */
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}2. Geometry Box
You can define the reference box for the clipping path.
margin-boxborder-boxpadding-boxcontent-box
div {
clip-path: circle(50%) margin-box;
}3. Animation
The clip-path property is animatable if the shapes have the same number of points (for polygons).
div {
transition: clip-path 0.5s;
clip-path: circle(20%);
}
div:hover {
clip-path: circle(50%);
}