凹形的CSS图像被剪掉了吗？

Question

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

我已经看过并试过很多无数小提琴，展示如何使用border-radius，但问题是角落永远不会产生尖锐的边缘。

非常感谢任何帮助！

Answer 1

不使用svg的解决方案非常棘手，想法是你需要一些包含你的实际图像的包装器，这个包装器应该有一个非常大的尺寸（在这个例子中，我使用了大小945 x 500）这样它可以渲染出一条大曲线。我们需要为此容器设置overflow:hidden以隐藏内部图像的其他溢出部分。这个技巧的功能类似于 限幅器 ，它可以通过曲线切断图像。

另请注意，在此示例中我们将使用CSS3的一些相当新的功能（没有它们我认为我们不能做到最好），即clip属性，实际上我们并不是真的需要这个（因为容器的背景是透明的，可以看到）。要使clip起作用，我们必须对容器应用position:absolute，这意味着我们必须使用容器的绝对位置。因此，要定位容器，您必须更改left和top属性。实际上，实际图像和容器之间存在偏移，因此会出现问题，例如，水平偏移为200px，但是当您将容器的left位置设置为{{{ 1}}，你想要的就是内部图像的100px。如果我们不做任何事情，通常内部图片的left将为left。因此，为了解决这个问题，我们必须对容器应用一些100 + 200 = 300px转换（水平转换为translate，因此左边的最终计算值为-200px，这是结果我们想要。以下是代码详情：

<强> HTML ：

300px - 200px = 100px

<强> CSS ：

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

Working Demo.

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

问题：看起来仍然存在一个令人讨厌的问题，虽然大容器#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; } 被裁剪并且透明但它仍然能够显示水平滚动条。我认为这个问题相当烦人。我们可以设置clipper，但这取决于其他内容...我希望有人能找到一个很好的解决方案来解决这个问题并直接发布或作为评论中的链接引用。我将不胜感激。

更新：刚刚找到上述问题的解决方案，我们需要包装另一个大小与内部图像相同的容器，为此最外层容器设置body { overflow-x:hidden;}。当然，为了定位内部图像，我们只需更改此最外层容器的overflow:hidden和left（而不是之前的top）。这是Complete Demo.

Answer 2

border-radius从区中心开始 如果你将border-radius值设置为等于或大于宽度或高度，你可以创建一个圆形的形状，但我不认为这就是你想要的。

检查这个

border-radius: 0 0 400px 400px; 

http://jsfiddle.net/ALytT/

但您可以在图像上方创建一个真正大圆角的形状并设置

overflow:hidden;
z-index:111;/* more than your image */

创建此效果