You can use this tool to convert svg paths to polygons Path to Polygon Converter. Upload a svg file and get the polygon points.
It can be a good idea to edit the svg file on illustrator and adjust the derired shape within an arboard of 100px max of with or height, then when using the tool, set the divideXBy and divideYBy parameters to 100.

For Firefox on the css we use the url and for Safary and Chrome, the polygon. Check for compatibility of the clip-path css property here: Can I use.

The highest x and y coordinate of the polygon should be 1, in order to cover the whole image.

CSS code:

The clip-path property points to a certain id of the desired svg. For Firefox, while for Chrome and Safary we use the polygon, units in percentages.

img.test-1 {
	-webkit-clip-path: polygon(0% 0%,100% 0%,100% 75%, 75% 75%,75% 100%,50% 75%,0% 75%);
	clip-path: url("#svgTest1");
}

HTML code:

The svg code must be inserted in the page, and the clipPath element must have an id.

<img class="test-1 img-responsive" src="test.jpg" alt="test 1">

<svg class="sr-only">
	<defs>
		<clipPath id="svgTest2" clipPathUnits="objectBoundingBox">
			<polygon points="0 0,1 0,1 0.75,0.75 0.75,0.75 1,0.5 0.75,0 0.75"/>
		</clipPath>
	</defs>
</svg>

Examples:

---

---