通过css + html阻止复杂形状的边界

Question

在上面的图像上，三角形是外部块，主块有'overflow: hidden'。在动画期间，动画图像的一部分被裁剪。在主要块中复杂形状的必要边界。有什么想法可能吗？浏览器的要求 - 顶级版本chrome或firefox。

示例：http://jsfiddle.net/F7Cz9/

Answer 1

这个有点复杂，我还没有完成任何样式，但是通过在包装上使用伪元素来创建上面的 ......你可以做到。< / p>

悬停是为了显示“溢出”工作。

Codepen.io Demo

<强> HTML

<div class="super-wrap">
  <div class="imgwrapper">
    <img src="http://lorempixel.com/output/city-q-c-350-100-8.jpg" alt="" />
  </div>
</div>

<强> CSS

.super-wrap {
  width:700px;
  margin: 50px auto 0;
  padding-top: 50px;
  border:1px solid grey;
}

.imgwrapper {
  width:700px;
  position: relative;

}

.imgwrapper img {
  display: block;
  margin-left: 0;
  transition:margin-left 1s ease;
}
.super-wrap:hover img {
  display: block;
  margin-left: 50%;
}