<div class="clip-wrap">
  <img src="http://karen@karenmenezes.com/shapes-polygon/clip-demo.jpg" alt="demo-image-clip-path" width="140" height="140">
  <span class="font-large">+</span>
  <img src="http://karen@karenmenezes.com/shapes-polygon/mask-hexagon.png" alt="demo-polygon-clip-path" width="140" height="140">
  <span class="font-large">=</span>
  <img src="http://karen@karenmenezes.com/shapes-polygon/clip-demo.jpg" alt="demo-clip-path" width="140" height="140" class="clip-polygon">
</div> <!-- /clip-wrap -->

		<svg class="clip-svg">
			  <defs>
				    <clipPath id="clip-svg-demo" clipPathUnits="objectBoundingBox">
					      <polygon points="0.25 0, 0.75 0, 1 0.5, 0.75 1, 0.25 1, 0 0.5" />
				    </clipPath>
			  </defs>	
		</svg>

.clip-wrap {
  text-align: center;
}

img {
  vertical-align: middle;
  margin: 0 10px;
}

.font-large {
  font-size: 36px;	
}

.clip-svg {
  width: 0;
  height: 0;
}

.clip-polygon {
		  -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
		  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
		  -webkit-clip-path: url("#clip-svg-demo");
		  clip-path: url("#clip-svg-demo");
}