Experiment with clip-path

Clip-Path Example

The clip-path property prevents a portion of an element from drawing by defining a clipping region.^[1] This way we can make different shapes out of HTML elements. The clip-path property can be applied to all HTML elements, SVG graphic elements and SVG container elements.^[2] It is also fully animatable! I added a simple animation for this pen. All you have to do is uncomment line 3 in the CSS editor.

If you are interested in learning more about clip-path, I recommend these sources:

• Clipping and Masking in CSS
• clip-path on WPD
• clip-path on MDN
• CSS Masking

References

1. Mozilla Developer Network, 2014
2. HTML5Rocks, April 4th, 2013