CSS form() Instructions | CSS-Methods

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

Nicely, that’s not completely true. It’s true there was no “straightforward” means to attract shapes, however we’ve had the path() perform for a while, which we will use to attract shapes utilizing SVG instructions instantly within the perform’s arguments. That is an instance of an SVG path pulled straight from WebKit’s weblog put up linked above:

Which implies we will yank these coordinates and drop them into the path() perform 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 should 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 attention-grabbing, street. Writing SVG by hand is a distinct segment specialty, not one thing you’d count on the common front-ender to know. I doubt I’m alone in saying I’d reasonably 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() perform is designed to be extra, let’s say, CSS-y. We get new instructions that inform the browser the place to attract strains, arcs, and curves, similar to path(), however we get to make use of plain English and native CSS models reasonably 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 produced from a few components. You’ll need to view the demo in both Chrome 135+ or Safari 18.4+ to see what’s up.

So, as an alternative of all these wonky coordinates we noticed in path(), we get new terminology. This put up is actually me making an attempt 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 ought to be when drawing. For instance, we will say “from prime left” utilizing directional key phrases to set the origin on the top-left nook of the factor. We are able to additionally use CSS models to set that place, so “from 0 0” works as effectively. As soon as we set up that start line, we get a set of instructions we will use for drawing strains, arcs, and curves.

I figured a desk would assist.

The spec is dense, as you may count on with plenty of transferring items like this. Once more, these are simply my notes, however let me know if there’s extra nuance you suppose could be helpful to incorporate within the desk.

Oh, one other enjoyable factor: you possibly can modify the form() on hover/focus. The one factor is that I used to be unable to transition or animate it, a minimum of within the present implementation.