image shapeing

svg clip path image shapeing

by John Doe

HTML

<div>
	<div>
		<img src="https://azulyc.files.wordpress.com/2013/03/cropped-borobudur1.jpg" alt="demo-clip-rhombus" class="polygon-clip-rhombus">
	</div>
	<svg class="clip-svg">
        <defs>
            <clippath id="polygon-clip-rhombus" clippathunits="objectBoundingBox">
                <polygon points="0 0, 1 0.0, 0.5 1, 0 0"/>
            </clippath>
            <clippath id="polygon-clip-rhombus2" clippathunits="objectBoundingBox">
                <polygon points="0.5 0, 1 0.5, 0.5 1, 0 0.5"/>
            </clippath>
	    </defs>
	</svg>
</div>

CSS

body{
    background-color: #C0C0C0;
}
img{
    width: 100%;
    height: auto;
}
.polygon-clip-rhombus {
  
    -webkit-clip-path: url("#polygon-clip-rhombus2");
	clip-path: url("#polygon-clip-rhombus2");	
  transition: all 600ms ease-in-out;
}
.polygon-clip-rhombus:hover{
		-webkit-clip-path: url("#polygon-clip-rhombus");
		clip-path: url("#polygon-clip-rhombus");
}