Clip images in html with `clip-path`
You may have some images that have some annoying artifacts around the border,
or maybe you just want an image to be a funky shape for design purposes. If
clip-path is the css property for you.
Check out this diamond shaped image from the mdn docs:
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
There are 4 functions,
inset, amongst a number of interesting options, some of which work in your browser currently, some of which may not.
Creating a vector for your specific shape might sound rough, but firefox has a built-in clip-path tool that can help you set it correctly in the browser.Tweet