Use Clip Path to Vary Your Designs on the Web

Everything on the web is a rectangle, but it doesn't have to be. Use the Clip Path property to alter elements in your layouts to be polygons, circles, triangles, and more.

My simple clip-path demo:

Wide Hive:

Clip path on MDN:

Support for clip-path on Can I Use:

Don't forget to use a `-webkit-` prefix to get `clip-path` to work in Safari and other webkit browsers.

Jen Simmons,Mozilla,Firefox,Developer Tools,DevTools,Developer Relations,CSS,CSS Grid,Layout,Graphic design,Flexbox,Fonts,clip-path,shapes,web design,blue note,polygon,creative CSS,CSS creativity,robotic,clip path,flexibility,content sizing,Resilient CSS,responsive website,responsive design,css grid layout,grid container,responsive web design,Resilient web design,web development,browser compatibility testing,browser compatibility,