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

Question

上图三 Angular 形是外 block ，主 block 有'overflow: hidden'。在动画图像的动画部分被裁剪。在主 block 中，复杂形状的必要边界。任何想法这怎么可能？浏览器要求 - 顶级版本 chrome 或 firefox。

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

Answer 1

这个有点复杂，我还没有把所有的样式都写下来，但是通过在包装器上使用伪元素来创建上面的三 Angular 形……你可以做到。

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

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%;
}