The (Clip) Path of Least Resistance

We may be familiar with the formable border property, which has been used for many a year for generating arrows to add a little bit of pizazz to our pages.

I only recently got a chance to play with the clip-path property to take these flourishes to a new, scalable level.

See the Pen Clip Path Demo by T.J. Fogarty (@tjFogarty) on CodePen.

Of course, ambitions for technology like this can scale far beyond the example above, as seen by this fantastic resource called Clippy.

This is only a brief example of what’s possible, and I’m looking forward to exploring this more on upcoming projects. Check out Clipping and Masking in CSS for far more exciting examples.