shape() | CSS-Tricks

The CSS shape() function enables us to more easily create complex paths, polygons and other shapes using a more human readable syntax using lines, arcs, and curves. It also allows much greater flexibility and responsiveness in the use of units than the CSS path() function.
There are several things that can be called “shapes” in CSS. There are CSS shapes that use the shape-outside and shape-margin properties, as well as shapes you can create using quirks in CSS like triangles, circles, dodecahedron, etc. While the shape() function can also provide the latter, it’s not used for drawing a shape (e.g. dodecahedrons) in the same way you may be used to thinking.
Currently, the only way to produce visible shapes with the shape() function is by using clip-path, meaning you have to create a cookie cutter, so to speak, and cut that cookie out from another element before you can see the shape. That said, there are many articles (even on CSS-Tricks) that reference creating shapes because once you have a cookie cutter, everything looks like a cookie… err… it’s easy to create those shapes, but understanding that there’s an intermediate step between creating the cookie cutter and seeing the shape it produces is an important part of understanding how shape() works and creating new shapes yourself.
You can also use the shape() function with the offset-path property to animate an element along that path, but that doesn’t produce a visible shape. In the future, you’ll be able to use it anywhere that requires a CSS basic shape primitive, but, as of this writing, clip-path and offset-path are it.
Let’s start by cutting out a round-ish cookie using clip-path:
We can also use the shape() function on an offset path to create an animation. Let’s animate the cookie along its own path:
Here’s a video showing the result in case your browser doesn’t support shape() just yet:
We’ll use the clip-path property in examples because it’s much easier to visualize how the shape() function works with it than with offset-path. But the shape() function works the same with both CSS properties, just one is for motion.
The shape() function accepts a number of keywords used to define where and how shapes are drawn.
The first keyword in the shape() function (which was omitted from the above examples because it’s optional) is the “fill” rule. This tells the browser how to fill the shape with color. There are two options: nonzero and evenodd (the same as in SVG). In most shapes, they work the same, however, when a shape overlaps itself or has overlapping shapes, the algorithms differ on what they fill with color and what they don’t.
The algorithm descriptions below are included for completeness. You don’t need to understand how the algorithms work to use shape(). Most of the time you can use the default value (nonzero) and it will work the way you’d expect. If it ever isn’t working the way you want, try switching to evenodd. And if that doesn’t work, then the fill rule isn’t the issue.
Next, it’s time to set a starting point for the shape. You do this using the from keyword then setting the X and Y coordinate relative to the reference box (by default this is the box including the element’s margin). One of the benefits of using the shape() function instead of the path() function (we’ll compare these in greater detail later) is that you can use any CSS unit (or math function) to set your starting point and your additional points. You can also use keywords like top, bottom, left, right, and center. If you only use one value, it will assume that is the X coordinate and set the Y coordinate to center.
But wait, there’s an exception! If you use the top or bottom keywords, it will use this as the Y coordinate and set the X coordinate to center.
The from keyword should be followed by a comma. You can also think of this as the first move command (discussed below).
In the next section, we will discuss specific shape commands for drawing lines, arcs, and curves. That syntax will use a particular shape command followed by either the to or by keywords, plus the coordinates associated with that shape command.
The difference between to and by is that coordinates following to are absolute coordinates (move to this coordinate) vs. by being followed by relative coordinates (move by this amount). This is the same as the capitalized commands (absolute coordinates) vs. lowercase commands (relative coordinates) in SVG.
These are the same as the path() commands used by SVG, but they have a more human readable syntax and are not limited to using pixel lengths. All shape() commands, except the last in a sequence, should be followed by a comma. All shape() commands take the previous command’s endpoint as the starting point. The first shape() command in the sequence uses the point set in the from line as its starting point.
For the sake of simplicity, I will only use the by keyword in shape commands below, but to is equally usable in all of the commands. Also, while I will often use the word “draw” to describe how a shape() command works, it’s important to remember that these commands do not show anything on the screen (the way the equivalent commands would in most SVG contexts), but rather are defining the shape of the cookie cutter that will be cutting out the shape from an element or, when using offset-path, defining the path an element will be animated along.
The move command is like picking up the pen while drawing and moving to a new location allowing for multiple, unconnected shapes to be created using a single shape function. Think of it as the equivalent to the SVG M command when using the path() function.
The line command draws a line from the starting point to the provided coordinates. Think of it as equivalent to the SVG L command when using the path() function.
The hline command draws a horizontal line from the starting point to the provided X coordinate. Think of it as the equivalent to the SVG H command when using the path() function.
The vline