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.





I accept comments via email, and clicking "Add Comment" will open your default email client. If the thoughts of your native email client opening horrifies you, you can instead email your comment to

Add Comment