CSS form() Instructions | CSS-Methods

The CSS form() operate just lately gained assist in each Chromium and WebKit browsers. It’s a means of drawing complicated shapes when clipping parts with the clip-path property. We’ve had the power to attract fundamental shapes for years — suppose circle, ellipse(), and polygon() — however no “simple” means to attract extra complicated shapes.

Effectively, that’s not solely true. It’s true there was no “simple” means to attract shapes, however we’ve had the path() operate for a while, which we are able to use to attract shapes utilizing SVG instructions immediately within the operate’s arguments. That is an instance of an SVG path pulled straight from WebKit’s weblog submit linked above:

<svg viewBox="0 0 150 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="black" d="M0 0 L 100 0 L 150 50 L 100 100 L 0 100 Q 50 50 0 0 z " />
</svg>

Which implies we are able to yank these <path> coordinates and drop them into the path() operate in CSS when clipping a form out of a component:

.clipped {
  clip-path: path("M0 0 L 100 0 L 150 50 L 100 100 L 0 100 Q 50 50 0 0 z");
}

I completely perceive what all of these letters and numbers are doing. Simply kidding, I’d need to learn up on that someplace, like Myriam Frisano’s more moderen “Helpful Recipes For Writing Vectors By Hand” article. There’s a steep studying curve to all that, and never everybody — together with me — goes down that nerdy, albeit fascinating, street. Writing SVG by hand is a distinct segment specialty, not one thing you’d anticipate the common front-ender to know. I doubt I’m alone in saying I’d fairly draw these vectors in one thing like Figma first, export the SVG code, and copy-paste the ensuing paths the place I would like them.

The form() operate is designed to be extra, let’s say, CSS-y. We get new instructions that inform the browser the place to attract traces, arcs, and curves, similar to path(), however we get to make use of plain English and native CSS items fairly than unreadable letters and coordinates. That opens us as much as even utilizing CSS calc()-ulations in our drawings!

Right here’s a reasonably easy drawing I constructed from a few parts. You’ll need to view the demo in both Chrome 135+ or Safari 18.4+ to see what’s up.

So, as a substitute of all these wonky coordinates we noticed in path(), we get new terminology. This submit is admittedly me attempting to wrap my head round what these new phrases are and the way they’re used.

Briefly, you begin by telling form() the place the start line must be when drawing. For instance, we are able to say “from high left” utilizing directional key phrases to set the origin on the top-left nook of the ingredient. We are able to additionally use CSS items to set that place, so “from 0 0” works as properly. As soon as we set up that start line, we get a set of instructions we are able to use for drawing traces, arcs, and curves.

I figured a desk would assist.

The spec is dense, as you may anticipate with numerous shifting items like this. Once more, these are simply my notes, however let me know if there’s further nuance you suppose could be useful to incorporate within the desk.

Oh, one other enjoyable factor: you may alter the form() on hover/focus. The one factor is that I used to be unable to transition or animate it, not less than within the present implementation.