shape()

Una Kravets: Creating non-standard shapes on the web, like a speech bubble or a heart have typically required you to cut off your actual borders with clip-path. […] This is where border-shape comes in. It’s a powerful upcoming CSS primitive that defines a custom shape for an element’s border. Welp, clip-path() had a good run. I’ll always be fond […]

We can make puzzle pieces in CSS thanks to the amazing clip-path: shape(). Here, Amit takes it further by making a whole grid of them with matched edges and content inside.

What can we say except BOINNNGGG BOINNGGGGGG.

We can use `shape()` to carve away the edges of an element to look like a folder tab. By hand.

A deep dive into `clip-path` from Amit Sheen, a very powerful tool in shape creation on the web, particularly now with `shape()`.

We’ve been trying to make the point around here that the new shape() in CSS is awesome. It’s the powerful <path> in SVG ported to CSS so it can use actual units. It’s probably how path() should have ported to begin with, but c’est la vie. I’ll make the point in this demo. Resize those […]

Got an old “modal” design? Now might be the time to upgrade it to a

Blobs! Gooey weird shapes you can fill with any background and even animate.

Use the `arc` command within the `shape()` function we can draw a line that follows a circle from one point to the next, controlling the direction.

Don’t underestimate `shape()` — it’s the CSS version of SVG that we absolutely needed.