是否可以仅使用 CSS 在此图像上创建底部曲线？
我已经看到并尝试了许多展示如何使用 border-radius 的小提琴，但问题是角落永远不会产生锋利的边缘。
任何帮助将不胜感激！
【问题讨论】：
svg 可以帮助解决此类问题。
border-radius 留下了略微圆角；这些角落需要锋利：-\
标签： css shapes css-shapes
border-radius 从 District 的中心开始 如果您将边框半径值设置为等于或大于宽度或高度，您可以创建一个圆形，但我认为这不是您想要的。
检查一下
border-radius: 0 0 400px 400px;
但您可以在图像上方创建一个非常大的圆形并设置
overflow:hidden;
z-index:111;/* more than your image */
创造这种效果
【讨论】：
不使用 svg 的解决方案非常棘手，想法是你需要一些包含实际图像的包装器，这个包装器应该有一个非常大的尺寸（在这个例子中，我使用尺寸 945 x 500）以便它可以渲染一条大曲线。我们需要为这个容器设置overflow:hidden 来隐藏内部图像的其他溢出部分。这个技巧就像一个 clipper 可以通过曲线切割图像。
还要注意，在这个例子中我们将使用 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;
}
注意：我在示例中使用的模糊效果仅用于演示目的，它仅适用于基于 webkit 的浏览器，我知道很难有一个跨浏览器的解决方案，我想它是你自己的部分。最后我要注意的是我已经提到这非常棘手，它需要反复试验，如果你想改变图像的大小，您可能需要通过 反复试验 重做这些步骤才能达到您想要的效果。这个答案只是主要说明了实现效果的原理和机制。
问题：看起来还是有一个令人讨厌的问题，虽然大容器clipper 被剪裁透明但仍然能够使水平滚动条出现。我觉得这个问题相当烦人。我们可以设置body { overflow-x:hidden;}，但这取决于其他内容......我希望有人能找到一个很好的解决这个问题并直接发布或作为评论中的链接参考。我将不胜感激。
更新：刚刚找到了解决上述问题的方法，我们需要包裹另一个大小与内部图像相同的容器，为这个最外层的容器设置overflow:hidden。当然要定位内部图像，我们只需更改这个最外层容器的left 和top（而不是之前的clipper）。这是Complete Demo.
【讨论】：
SVG 始终是最佳选择。