Enhanced CSS Shapes with shape() — Part 4: Close and Move

This is the fourth post in a series about the new CSS `shape()` function. So far, we’ve covered the most common commands you will use to draw various shapes, including lines, arcs, and curves. This time, I want to introduce you to two more commands: `close` and `move`. They’re fairly simple in practice, and I think you will rarely use them, but they are incredibly useful when you need them.

### The `close` command

In the first part, we said that `shape()` always starts with a `from` command to define the first starting point but what about the end? It should end with a `close` command.

> But you never used any `close` command in the previous articles!?

That’s true. I never did because I either “close” the shape myself or rely on the browser to “close” it for me. Said like that, it’s a bit confusing, but let’s take a simple example to better understand:

“`css
clip-path: shape(from 0 0, line to 100% 0, line to 100% 100%)
“`

If you try this code, you will get a triangle shape, but if you look closely, you will notice that we have only two line commands whereas, to draw a triangle, we need a total of three lines. The last line between `100% 100%` and `0 0` is implicit, and that’s the part where the browser is closing the shape for me without having to explicitly use a `close` command.

I could have written the following:

“`css
clip-path: shape(from 0 0, line to 100% 0, line to 100% 100%, close)
“`

Or instead, define the last line by myself:

“`css
clip-path: shape(from 0 0, line to 100% 0, line to 100% 100%, line to 0 0)
“`

But since the browser is able to close the shape alone, there is no need to add that last `line` command nor do we need to explicitly add the `close` command.

This might lead you to think that the `close` command is useless, right? It’s true in most cases (after all, I have written three articles about `shape()` without using it), but it’s important to know about it and what it does. In some particular cases, it can be useful, especially if used in the middle of a shape.

In this example, my starting point is the center and the logic of the shape is to draw four triangles. In the process, I need to get back to the center each time. So, instead of writing `line to center`, I simply write `close` and the browser will automatically get back to the initial point!

Intuitively, we should write the following:

“`css
clip-path: shape(
from center,
line to 20% 0, hline by 60%, line to center, /* triangle 1 */
line to 100% 20%, vline by 60%, line to center, /* triangle 2 */
line to 20% 100%, hline by 60%, line to center, /* triangle 3 */
line to 0 20%, vline by 60% /* triangle 4 */
)
“`

But we can optimize it a little and simply do this instead:

“`css
clip-path: shape(
from center,
line to 20% 0, hline by 60%, close,
line to 100% 20%, vline by 60%, close,
line to 20% 100%, hline by 60%, close,
line to 0 20%, vline by 60%
)
“`

We write less code, sure, but another important thing is that if I update the `center` value with another position, **the** `close` **command will follow that position**.

Don’t forget about this trick. It can help you optimize a lot of shapes by writing less code.

### The `move` command

Let’s turn our attention to another `shape()` command you may rarely use, but can be incredibly useful in certain situations: the `move` command.

Most times when we need to draw a shape, it’s actually *one continuous shape*. But it may happen that our shape is composed of different parts not linked together. In these situations, the `move` command is what you will need.

Let’s take an example, similar to the previous one, but this time the triangles don’t touch each other:

Intuitively, we may think we need four separate elements, with its own `shape()` definition. But that example is