掩模z-index绝对位置图像如何工作后向链接？

Question

我有一个img链接在向后和重叠img（位置：绝对;顶部：0px;左：10px;）与-webkit-clip-path：polygon（0px 150px，200px 150px，100px 0px）;。< / p>

但是：在可见区域的img.clip-path下链接不起作用。

如何解决这个问题？可以用SVG创建另一种布局吗？

PS：z-index和position：相对于链接不起作用。 SVG + clipPath不起作用。

演示：http://jsfiddle.net/9fjv4wbr/

＆＃13;

＆＃13;

img { width: 220px;  margin: 20px; }
img:hover { opacity: 0.5; }

.absolute { position: absolute; top:0px; left: 10px; }
.back { width: 600px; }

.clip-polygon {
  -webkit-clip-path: polygon(0px 150px,200px 150px,100px 0px);
}

body {
  background: linear-gradient(
    to bottom,
    #999,
    #eee
  );
}

body, html {
  height: 100%;
}

＆＃13;

<a href="http://www.google.com/"><img src="http://testp.infinityyazilim.com/IlkayOzturk/img/title_mentor.png" class="back"></a>
    
<a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" alt="" class="absolute clip-polygon"></a>

＆＃13;

＆＃13;

＆＃13;