Clip-path CSS Hack for IE 10 and Edge

HTML & CSS
7

An SVG like this will work in IE9 and later, as well as Firefox and Chrome.

<svg  version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="192" height="128.641"
	 viewBox="0 0 192 128.641" overflow="visible" enable-background="new 0 0 192 128.641" xml:space="preserve">
	<defs>
		<polygon id="triangle" points="11.568,126 96.753,1.419 161.259,126"/>
	</defs>
	<clipPath id="clip1">
		<use xlink:href="#triangle" />
	</clipPath>
	<g transform="matrix(1 0 0 1 0 0)" clip-path="url(#clip1)">
		<image width="400" height="268" xlink:href="https://lh3.googleusercontent.com/-slDCF1VQlxg/VzxDn8JIQTI/AAAAAAAAHqs/yyMNSncsRAU93Ef6nOScd2jmclOxrmVxwCCo/s150/20160414_2031.JPG"  transform="matrix(0.48 0 0 0.48 0 0)">
		</image>
	</g>
</svg>

No hacks required, unless you want to support IE8, where I would dish out PNG alternatives if I could be bothered with pleasing the 0.02% of users.

2 Likes