Use an Illustrator vector shape as a mask in HTML
Make a vector mask in Illustrator
- Create the shape you want
- Put the artboard tightly around it
- Ungroup everything (hit command+g a few times)
- Save for the web as an SVG
The HTML and CSS
The HTML couldn't be more simple, you just put any old image into your document and add a class to it so you can target it.
This CSS below is all you need, you'll need to change the path to point to the SVG you saved earlier.
/*--- Masks ---*/
mask: url(./images/mask_01.svg) no-repeat;
-webkit-mask: url(./images/mask_01.svg) no-repeat;
-o-mask: url(./images/mask_01.svg) no-repeat;
-ms-mask: url(./images/mask_01.svg) no-repeat;
Or if you are running autoprefixer like we are in this codepen example below you can just add mask: and not worry about the browser prefies: