Triangle shape clip mask using CSS

Triangle shape clip mask using CSS to clip image so that background appear.

HTML

<svg width="0" height="0">
	<clipPath id="clipping1" clipPathUnits="objectBoundingBox">
		<polygon points="0 0, 0 1, 100 0,   .6 0, .5 .2, .4 0">
	</clipPath>
</svg>
<img class="clip-animation" alt="" src="http://c1.staticflickr.com/9/8449/7966887330_ddc8018682_h.jpg">

CSS

.clip-animation {clip-path: url(#clipping1);-webkit-clip-path: url(#clipping1);  margin:100px; width:500px; border: 20px solid red;} 
	body{ background-color:#CCCCCC; }