可能有圆角/曲面，而不是角落？

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

你朝着正确的方向前进

将曲线放在＆＃34; body＆＃34;或.main部分overflow: hidden以及否定margin-top是一个不错的选择。要使用position: absolute的第三方内容解决您的问题，您只需确保.main有position: relative。

Here is a fiddle在.main内有定位和非定位内容（注意：我将曲线调整为演示更加突出）。

它在IE9 +，Chrome和FF中测试得很好。显然，放在标题中或.main之外的其他地方的任何第三方内容都不一定会被隐藏，但这应该是预料之中的。然而，正如this fiddle所示，即使可以通过正确定位（relative）和z-indexing（main高于header）设置来解决这个问题。

Answer 2

尝试使用margin:-20px或其他衡量标准。