One thing that has long surprised (and saddened) me is that the
clip-path property, as awesome as it is, only takes a few values. The
ellipse() functions are nice, but hiding overflows and rounding with
border-radius generally helps there already. Perhaps the most useful value is
polygon() because it allows us to draw a shape out of straight lines at arbitrary points.
Here’s a demo of each value:
The sad part comes in when you find out that
clip-path doesn’t accept
path(). C’mon it’s got path in the name! The path syntax, which comes from SVG, is the ultimate syntax. It allows us to draw literally any shape.
More confusingly, there already is a
path() function, which is what properties like
I was once so flabbergasted by all this that I turned it into a full conference talk.
The talk goes into the
shape-outside property and how it can’t use
path(). It also goes into the fact that we can change the
d property of a literal
I don’t really blame anyone, though. This is weird stuff and it’s being implemented by different teams, which inevitably results in different outcomes. Even the fact that SVG uses unit-less values in the
<path> syntax is a little weird and an anomaly in CSS-land. How that behaves, how values with units behave, what comma-syntax is allowed and disallowed, and what the DOM returns when asked is plenty to make your head spin.
Anyway! Along comes Firefox with an implementation!
Does anyone know if clip-path: path() is behind a flag in chrome or something. Can't seem to find it, but they do support offset-path: path(), so figured they would support both.
— Estelle Weyl (@estellevw) September 13, 2018
Here’s that flag in Firefox (
Also shipped in Firefox 71 today — support for using SVG path() syntax with Clip Path in CSS.
Yup — this is now a thing:
clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
— Jen Simmons (@jensimmons) December 3, 2019
And here’s a demo…
you’ll see a square in unsupported browsers and a heart in the ones that support
clip-path: path(); — which is only Firefox Nightly with the flag turned on at the time of this writing.
Now, all we need is:
clip-pathto be able to point to the URL of a
<clipPath>in SVG, like
shape-outsideto be able to use
shape-outsideto be able to use a
offset-pathto take all the other shape functions
- Probably a bunch of specs to make sure this is all handled cleanly (Good luck, team!)
- Browsers to implement it all