Hi, this is from the page source:
<section id="block-block-33" class="block block-block col-md-2 clearfix"> <p> <img alt="dog" src="http://godrupal.info/shalomhomesolutions/sites/default/files/xpress-auto-care-car-sales.png" /><br /><svg height="0" width="0"><br /><defs><br /><clippath id="svgTextPath"></clippath></defs></svg></p> <polygon points="0,50 100,0 100,100" style="fill:none; stroke:purple; stroke-width:1"></polygon><br /><br /> </section>
<section id="block-block-35" class="block block-block clearfix">
<p> <img alt="dog" src="http://godrupal.info/shalomhomesolutions/sites/default/files/xpress-auto-care-car-sales.png" /><br /><svg height="0" width="0"><br /><defs><br /><clippath id="svgTextPath"></clippath></defs></svg></p>
<polygon points="0,50 100,0 100,100" style="fill:none; stroke:purple; stroke-width:1"></polygon><br /><br />
</section>
The polygon is part of the SVG, put it in the defs tag like so:
<img alt="dog" src="dog.jpg" />
<svg height="0" width="0">
<defs>
<clipPath id="svgTextPath">
<polygon points="0,50 100,0 100,100" style="fill:none; stroke:purple; stroke-width:1" />
</clipPath>
</defs>
</svg>
and where the clip-path CSS is? clip-path works in Mozilla (have no idea with Chrome). I attached the script that worked.
If it's still doesn't work, like dsonesuk said, some alternative methods would be great.
clip path css - 2.html