# Experiment with `clip-path`

Hover over the `<div>` to see the transition. Also note the custom `-webkit-` scrollbar.

## 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