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

【问题标题】：Block boundaries of complex shape via css+html通过css + html阻止复杂形状的边界
【发布时间】：2014-07-12 15:44:09
【问题描述】：

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

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

【问题讨论】：

请发布相关的 css+html 并在可能的情况下在 jsfiddle 或 codepen 等沙箱中提供演示。
好的，添加了 jsfiddle 上的示例
感谢您的演示。你想要的实际结果是什么？您是否希望图像的某些部分在三角形内可见，或者您希望看到的三角形底部的几个白色像素消失了？在演示中，我没有看到图像被裁剪。三角形正好位于图像容器的边界之上。
当前的 HTML 不允许达到我想要的结果，这只是问题和临时解决方案的示例。我希望图像的某些部分在三角形内可见。

标签： html css overflow markup css-shapes

【解决方案1】：

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

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

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

【讨论】：

可行，但是样式更复杂（border-radius，border-top on main block ...）这种方法带来了很多问题。现在我正在尝试使用 masking(mask css property) 来获得更方便的结果。
不幸的是，实际上，这是唯一的方法。