CSS Shapes, clipping and masking – and how to use them

The general release of Firefox 54 is just around the corner and it will introduce new features into an already cool CSS property: clip-path, a property that allows us to clip (i.e., cut away) parts of an element. With Firefox 54, you will be able to use CSS shapes as well: insets, circles, ellipses and polygons. In this demo-rich post, we’ll explore the features of clipping and masking and how they are used.

Link: https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/