Make Shapes with CSS clip-path: polygon, circle, Clipping, and Animation

Have you ever seen a website where an image is clipped into a circle, or a box looks like its corner has been sliced off diagonally? Such "non-rectangular shapes" can be created with CSS alone, without editing the image itself, using clip-path. This article explains, step by step, what clip-path is, what shapes you can make, and how to set the coordinates.

What clip-path Is

clip-path is a CSS property that clips the visible area of an element into a specified shape. The size and layout of the element itself do not change; only the inside of the shape is shown, while the outside becomes transparent and hidden. It is similar to making a stencil with masking tape and showing only what is inside it.

Traditionally, to make shapes like circles or triangles you had to clip the image in advance and export it as a transparent PNG, or fake a triangle using a combination of borders. With clip-path, you keep the original image or element as-is and freely change the visible shape from the CSS side alone. A big advantage is that if you want to adjust the shape later, you only have to rewrite the numbers in the CSS.

clip-path lets you use the built-in basic shape functions (circle, ellipse, inset, and polygon), or specify complex curves with an SVG path. Let us start with the easy-to-handle basic shapes. If you want to quickly prepare a more organic, smoothly curved shape, you also have the option of generating it with a dedicated tool such as the SVG Blob Generator.

Basic Shapes: circle, ellipse, inset

The most common use of clip-path is specifying basic shapes with functions. If you know these three, you can handle most designs.

circle

Writing clip-path: circle(50%); clips the element into a circle centered on the element. The value in the parentheses is the radius, and adding at, as in circle(50% at 30% 40%), lets you shift the center of the circle. It is the go-to choice for showing a profile picture as a circle.

ellipse

Specifying the horizontal and vertical radii separately, as in clip-path: ellipse(40% 30% at 50% 50%);, produces an ellipse. It suits wide or tall banners when you want a softer impression.

inset (rounded rectangle)

inset() clips into a rectangle by specifying how much to trim inward from the top, right, bottom, and left. Adding round, as in clip-path: inset(10% 20% 10% 20% round 16px);, also lets you set rounded corners. It is handy when you want to trim the edges of an element slightly inward.

polygon and Setting Coordinates

When you want to make a free polygon such as a triangle, a diagonal cut, or a star, you use polygon. It is the most versatile of all clip-path options and is well worth learning.

polygon defines a shape by listing the vertex coordinates in order, separated by commas. Each coordinate is an X Y pair, and the basic approach is to give a relative position where the top-left of the element is 0% 0% and the bottom-right is 100% 100%.

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

The example above becomes a triangle connecting the top center (50% 0%), the bottom-right (100% 100%), and the bottom-left (0% 100%). By adding more points you can make squares, pentagons, stars, and any complex shape you like. For instance, to cut the bottom edge of a header diagonally, you shift only the Y of the two lower points, as in polygon(0 0, 100% 0, 100% 85%, 0 100%).

• List the vertices in order, clockwise (or counterclockwise). If the order is swapped, you get an unintended self-intersecting shape.
• Coordinates can use px as well as %, but % is often easier to handle for responsive layouts.

Calculating vertex coordinates by hand is tedious, so in practice it is efficient to use a generator that lets you drag points while watching a preview. Once the shape is set, you just copy and paste the output CSS.

Clipping Images and Elements

clip-path applies not only to img elements but also directly to box elements such as a div containing text or a background. To use it, you simply write the clip-path property on the target element.

.photo { clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); }

Specifying this displays the image with its bottom edge cut diagonally. What matters is that even the part that is clipped away and no longer visible keeps its area (its width and height in the layout) as before. Neighboring elements are placed based on the rectangle before clipping, so adjust while checking how the overall design looks.

Clipping a box with a gradient background using clip-path makes it easy to create diagonal bands or ribbon-like decorations. A standard combination is to prepare the gradient code with the CSS Gradient Generator and then layer clip-path on that element. Thinking of the background pattern and the shape separately makes the part easier to reuse.

Also, if you want an organic, smoothly curved clip, plain straight-line polygons are hard to use. In that case, it is better to make the curved shape with the SVG Blob Generator and pass it to clip-path as an SVG path.

Animating Shape Changes on Hover

One of the appeals of clip-path is that you can animate the shape itself. Combined with transition, you can create an effect where the shape gradually changes on hover.

.card { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path .3s ease; } .card:hover { clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); }

In this example, the shape is a normal rectangle by default and changes smoothly over 0.3 seconds to a shape with the bottom edge cut diagonally on hover. The trick to animating without breaking is to keep the number of vertices (the number of coordinates) the same before and after the change. If the counts differ, the browser cannot interpolate the intermediate shape well, and the animation stutters or snaps instantly.

For example, to change from a triangle (3 points) to a square (4 points), you match the point counts by, say, placing a fourth point in the triangle at a position that has no visible effect. It takes a little effort, but just being mindful of this one point makes shape animations far more stable.

Browser Support and Fallbacks

clip-path is now widely supported in major modern browsers (Chrome, Edge, Firefox, and Safari), and both the basic shape functions and polygon work without issues. There was a time when a few older browsers required a prefix (-webkit-), but in current environments it works almost entirely with the standard property alone.

That said, in environments that do not support clip-path, the basic behavior is that the clipping has no effect and the original rectangle is shown. In many cases this just makes the design a little plainer while the content remains readable, so it is not a big problem for decorative purposes. What matters is to not place information that must remain readable in the area hidden by clip-path. Design so that text and important buttons are kept inside a safe margin and are not cut off by the clipping.

• For decorative shapes, design so that showing a rectangle when unsupported is acceptable.
• Do not place important elements right at the edge of the clip; leave some margin.
• If you strongly target older environments, check support in official compatibility information.

clip-path is a property that greatly expands your design expression, letting you make free shapes with CSS alone without editing images. Start with simple shapes like triangles and diagonal cuts, and once you are comfortable, combine them with a background made in the CSS Gradient Generator or a curve from the SVG Blob Generator. Watching the shape change as you work is the shortcut to understanding.

Please note that this article is intended to provide general information. Browser support and specifications can change, so when implementing, make your decision after checking the latest official documentation and compatibility information.