凹形裁剪的CSS图像？

Question

是否可以仅使用 CSS 在该图像上创建底部曲线？

我已经看到并尝试了无数展示如何使用 border-radius 的 fiddle ，但问题是 Angular 落永远不会产生锐利的边缘。

如有任何帮助，我们将不胜感激!

Answer 1

不使用 svg 的解决方案非常棘手，想法是您需要一些包含实际图像的包装器，这个包装器应该有一个非常大的尺寸(在这个例子中，我使用了尺寸 945 x 500) 以便它可以渲染大曲线。我们需要为这个容器设置overflow:hidden来隐藏内部图像的其他溢出部分。这个技巧的作用就像一个裁剪器，可以通过曲线剪掉图像。

另请注意，我们将在本示例中使用 CSS3 的一些相当新的功能(如果没有它们，我认为我们充其量也做不到)，即 clip 属性，实际上我们没有' 真的需要这个(因为容器的背景是透明的，可以透过它看到)。要使 clip 正常工作，我们必须为容器应用 position:absolute，这意味着我们必须为容器使用绝对位置。因此，要定位容器，您必须更改 left 和 top 属性。其实实际图片和容器之间是有偏移的，所以会出现问题，比如水平偏移是200px，但是当你设置left位置的时候对于 100px 的容器，您希望它正好是内部图像的 left。如果我们什么都不做，通常内部图像的 left 将是 100 + 200 = 300px。因此，为了解决这个问题，我们必须对容器应用一些translate 转换(将其水平转换为 -200px，因此左侧的最终计算值将是 300px - 200px = 100px 这就是我们想要的结果，下面是代码细节:

HTML:

<div id='clipper'>
   <div></div>
</div>

CSS:

#clipper > div {    
  width:400px;
  height:200px;
  background:url(http://placekitten.com/400/200);                
  position:absolute;
  left:calc(50% - 300px);
  top: calc(100% - 200px);
  -webkit-filter: blur(1px);
}
#clipper {     
  border-bottom-left-radius:1800px 500px;
  border-bottom-right-radius:1800px 800px;
  overflow:hidden;
  height:500px;
  width: 945px;    
  position:absolute;
  clip: rect(300px, 573px, 500px,173px);
  -webkit-transform: translate(-173px, -300px);    
  left: 100px;
  top:50px;    
}

Working Demo.

注意:我在例子中使用的模糊效果只是为了演示目的，它只适用于基于 webkit 的浏览器，我知道很难有一个跨浏览器的解决方案，我想它是你自己的部分。最后我要注意的是我已经提到这是非常棘手的，它需要反复试验，如果你想改变图像的大小，您可能需要通过反复试验 重做这些步骤才能达到您想要的效果。这个答案只是主要展示了实现效果的原理和机制。

问题:貌似还有一个很讨厌的问题，虽然大容器clipper被裁剪透明了，但是还是能够让水平滚动条出现。我认为这个问题相当烦人。我们可以设置body { overflow-x:hidden;} 但它取决于其他内容......我希望有人能找到一个很好的解决这个问题的方法并直接发布或作为评论中的链接引用.我将不胜感激。

更新:刚刚找到解决上述问题的办法，我们需要再包装一个和内图大小相等的容器，为此设置overflow:hidden最外面的容器。当然，为了定位内部图像，我们只需更改这个最外层容器的 left 和 top(而不是像以前那样的 clipper)。这是 Complete Demo.