CSS Shapes, Clipping and Masking

The release of Firefox 54 is just around the corner and it will introduce new features into an already cool CSS property: clip-path.

clip-path is a property that allows us to clip (i.e., cut away) parts of an element. Up until now, in Firefox you could only use an SVG to clip an element:

But with Firefox 54, you will be able to use CSS shapes as well: insets, circles, ellipses and polygons!, circles, ellipses and polygons!

Do note that clipping is different from masking. Masking just hides some content – leaving the bounding box unaltered – clipping actually cuts away things:

CSS Shapes, Clipping and Masking →

Elsewhere , ,

One Response to CSS Shapes, Clipping and Masking

  1. Pingback: Clippy – CSS clip-path Maker | Bram.us

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.