Clip-path with CSS
I found this interesting article about css and svg clipping from Smashing Magazine, and wanted to test it myself. It shows how to easily clip a photo with CSS (using polygons). Unfortunately not all browsers support this, so with e.g. Firefox, you need to use svg clipping. Article gives you examples on how to do both.

Here are my test clippings:

demo-clip-css
Base image
demo-clip-css
polygon(0 100%, 0 0, 100% 0, 80% 100%);
demo-clip-css
polygon(40% 100%, 0 30%, 100% 0, 100% 100%);
demo-clip-css
polygon(0 100%, 0 0, 100% 30%, 60% 100%);
demo-clip-css
polygon(30% 100%, 0 0, 100% 0, 100% 100%);
demo-clip-css
demo-clip-css
Hexa: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
demo-clip-css
These hexagons also have a hover effect that plays with grayscaling. More information can be found designshack.net/articles/css/joshuajohnson-2/.
More useful examples can be found ianlunn.github.io/Hover/.
demo-clip-css
Rhombus: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);