Flash cards
Review the key moves
What is the main idea behind CSS Image Shapes?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___-path: circle(50%);Put the learning moves in the order that makes the concept easiest to apply.
With CSS it is easy to shape (clip) images to circles, ellipses and polygons.
CSS clip-path Property and the circle() Function
The clip-path property lets you clip an element to a basic shape.
The circle() function defines a circle with a radius and a position.
Here we clip an image to a circle with 50% radius:
Example
img {
clip-path: circle(50%);
}Live preview
We can also specify the center of the circle. This can be a length or percentage value. It can also be a value such as left, right, top, or bottom. The default value is center.
Here we clip an image to a circle with 50% radius and position the center of the circle to the right:
Example
img {
clip-path: circle(50% at right);
}Live preview
CSS shape-outside and circle()
The shape-outside property lets you define a shape for the wrapping of the inline content.
The circle() function defines a circle with a radius and a position.
Here we clip an image to a circle with 40% radius, and set the shape-outside to a circle with 45% radius (to shape the text):
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac laoreet quam, id aliquet nisl. Etiam id eros ligula. Aenean euismod, enim sed mollis feugiat, magna massa cursus leo, ut maximus metus eros non ante. Praesent eget tincidunt mauris, ut euismod ipsum. In hac habitasse platea dictumst. In dapibus tortor magna, elementum elementum neque sagittis id. Integer vestibulum semper dui, quis finibus libero elementum nec. Fusce ultricies lectus a eros interdum, efficitur iaculis nibh varius. Praesent sed ex bibendum, fermentum tortor nec, tincidunt augue. Maecenas in lobortis ligula, at viverra velit. Donec facilisis blandit purus sed efficitur. Duis est augue, bibendum quis bibendum sed, feugiat vel eros. Quisque ut nisi sed erat malesuada euismod. Aliquam feugiat erat eget sodales imperdiet. Ut vel tortor auctor, rutrum lectus a, tempor nunc. Vivamus nec elit ornare, dictum urna sollicitudin, ornare diam. Nullam dictum arcu vitae odio ultrices iaculis.
Example
img {
float: left;
clip-path: circle(40%);
shape-outside: circle(45%);
}Live preview
CSS clip-path and ellipse()
The clip-path property lets you clip an element to a basic shape.
The ellipse() function defines an ellipse with two radii x and y.
Here we clip an image to an ellipse with 50% radius x and 35% radius y:
Example
img {
clip-path: ellipse(50% 35%);
}Live preview
We can also specify the center of the ellipse. This can be a length or percentage value. It can also be a value such as left, right, top, or bottom. The default value is center.
Here we clip an image to an ellipse with 50% radius x and 35% radius y, and position the center of the ellipse to the right:
Example
img {
clip-path: ellipse(50% 35% at right);
}Live preview
CSS shape-outside and ellipse()
Here we clip an image to an ellipse with 40% radius x and 50% radius y, and set the shape-outside to an ellipse with 45% radius x and 50% radius y (to shape the text):
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac laoreet quam, id aliquet nisl. Etiam id eros ligula. Aenean euismod, enim sed mollis feugiat, magna massa cursus leo, ut maximus metus eros non ante. Praesent eget tincidunt mauris, ut euismod ipsum. In hac habitasse platea dictumst. In dapibus tortor magna, elementum elementum neque sagittis id. Integer vestibulum semper dui, quis finibus libero elementum nec. Fusce ultricies lectus a eros interdum, efficitur iaculis nibh varius. Praesent sed ex bibendum, fermentum tortor nec, tincidunt augue. Maecenas in lobortis ligula, at viverra velit. Donec facilisis blandit purus sed efficitur. Duis est augue, bibendum quis bibendum sed, feugiat vel eros. Quisque ut nisi sed erat malesuada euismod. Aliquam feugiat erat eget sodales imperdiet. Ut vel tortor auctor, rutrum lectus a, tempor nunc. Vivamus nec elit ornare, dictum urna sollicitudin, ornare diam. Nullam dictum arcu vitae odio ultrices iaculis.
Example
img {
float: left;
clip-path: ellipse(40% 50%);
shape-outside: ellipse(45% 50%);
}Live preview
CSS polygon() Function
The polygon() function defines a polygon.
This 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.
Here we clip an image to a polygon:
Example
img {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}Live preview
CSS Properties and Functions
The following table lists the CSS properties and functions used in this chapter:
| Property/Function | Description |
|---|---|
| clip-path | Lets you clip an element to a basic shape or to an SVG source |
| shape-outside | Lets you define a shape for the wrapping of the inline content |
| circle() | Defines a circle with a radius and a position |
| ellipse() | Defines an ellipse with two radii x and y |
| polygon() | Defines a polygon |