javascript - 可能有一个圆形/弯曲的侧面，而不是角落？

Question

尝试构建类似于下图的东西。

容器将是 100% 宽度，标题将是固定高度，但主体高度将是动态的。

通过对“Body” div 执行以下操作，我几乎可以得到我想要的东西

border-radius: 50% 50% 0 0 / 15px 15px 0 0;
-moz-border-radius: 50% 50% 0 0 / 15px 15px 0 0;
-webkit-border-radius: 50% 50% 0 0 / 15px 15px 0 0;

从理论上讲，我想让“Header” div 弯曲，身体放在下面，但我认为这是不可能的（标题将包含一个填充的图像）

编辑：忘了提。使用上面的代码，并margin-top:-15px添加到底部 div 中，它在 Firefox 和 IE 中确实有效，但在 Chrome 和 Safari 中无效。地图和滑块仍然转到 Header div 并没有被切断。

编辑 2 http://jsfiddle.net/ShKNu/4/

^ 这就是我目前拥有的方式。如您所见，地图并没有在曲线上被截断，而是直接进入标题。

Answer 1

你朝着正确的方向前进

将曲线放在“身体”或.main带有overflow: hidden负数的部分margin-top是一个很好的方法。要解决您与 3rd 方内容有关的问题position: absolute，您只需要确保您.main拥有position: relative.

这是一个内部定位和非定位内容的小提琴.main（注意：我调整了曲线以使演示更加突出）。

它在 IE9+、Chrome 和 FF 中测试良好。显然，放置在标题或外部其他地方的任何第 3 方内容.main不一定会被隐藏，但这应该是可以预料的。然而，即使这样也可以通过设置正确的定位 ( relative) 和 z-indexing (main高于header) 来解决，正如这个小提琴所示。

Answer 2

尝试使用margin:-20px或其他测量。