The (Clip) Path of Least Resistance

Publisher: TJ Fogarty

Modified: 2018-03-13

We may be famil­iar with the formable border prop­er­ty, which has been used for many a year for gen­er­at­ing arrows to add a lit­tle bit of pizazz to our pages. 

I only recent­ly got a chance to play with the clip-path prop­er­ty to take these flour­ish­es to a new, scal­able level.

See the Pen Clip Path Demo by T.J. Fog­a­r­ty (@tjFogarty) on Code­Pen.

Of course, ambi­tions for tech­nol­o­gy like this can scale far beyond the exam­ple above, as seen by this fan­tas­tic resource called Clip­py.

This is only a brief exam­ple of what’s pos­si­ble, and I’m look­ing for­ward to explor­ing this more on upcom­ing projects. Check out Clip­ping and Mask­ing in CSS for far more excit­ing examples.