With CSS it is easy to shape (clip) images to circles, ellipses and polygons.
The CSS clip-path Property
The clip-path property lets you clip an element to a basic shape.
The CSS circle() Function
The circle() function defines a circle with a radius and a position.
The circle() function is used within the clip-path property.
Example
Clip an image to a circle with 50% radius:
img {
clip-path: circle(50%);
}
Example
Clip an image to a circle with 50% radius and position the center of the circle to the right:
img {
clip-path: circle(50% at right);
}
The CSS shape-outside Property
The shape-outside property lets you define a shape for the wrapping of the inline content.
The circle() function is also used within the
shape-outside
Example
Use of circle(), clip-path and shape-outside:
img {
float: left;
clip-path: circle(40%);
shape-outside: circle(45%);
}
The CSS ellipse() Function
The ellipse() function defines an ellipse with two radii x and y.
The ellipse() function is used within the clip-path property and the sh
Example
Clip an image to an ellipse with 50% radius x and 35% radius y:
img {
clip-path: ellipse(50% 35%);
}
Example
Clip an image to an ellipse with 50% radius x and 35% radius y, and position the center of the ellipse to the right:
img {
clip-path: ellipse(50% 35% at right);
}
The shape-outside Property and ellipse()
Example
Use of ellipse(), clip-path and shape-outside:
img {
float: left;
clip-path: ellipse(40% 50%);
shape-outside: ellipse(45% 50%);
}
The CSS polygon() Function
The polygon() function defines a polygon.
The polygon() function contains points that define the polygon. This can be a length or percentage value. Each point is a pair of x and y coordinates. 0 0 defines the left top corner and 100% 100% defines the right bottom corner.
The polygon() function is used within the clip-path property and the shape-outside property.
Example
Clip an image to a polygon:
img {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
ape-outside property.