Javascript 可能有一个圆形/弯曲的边，而不是角？

尝试构建类似下图的内容

容器将是100%宽度，收割台将是固定高度，但车身高度将是动态的

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

从理论上讲，我希望“Header”div是弯曲的，主体位于下方，但我认为这是不可能的（Header将包含填充图像）

编辑：忘记提及。通过上面的代码，以及底部div中添加的

margin top:-15px

，它在Firefox和IE中确实有效，但在Chrome和Safari中则不起作用。贴图和滑块仍然转到Header div，并且没有被切断

编辑2

^这就是我现在拥有它的方式。如您所见，贴图不会在曲线上被截断，而是直接进入标题

---

尝试使用

边距：-20px

或其他测量值。

您的方向是正确的 将曲线放在“主体”或

.main

部分，并带有

溢出：隐藏和负
边距顶部
，这是一个很好的方法。要解决第三方内容为
位置：绝对
的问题，您只需确保
.main
具有
位置：相对

在
.main
中包含定位和非定位内容（注意：我调整了曲线，使其在演示中更加突出）

它在IE9+、铬和FF中测试良好。显然，放置在标题中或
.main
之外的任何第三方内容都不一定会隐藏，但这是意料之中的。但是，即使是这样，也可以通过正确的定位（
relative
）和z-indexing（
main
高于
header
）设置来解决，如图所示。
将header div放在body div的下面？您是否尝试了clearfix而不是overflow:hidden？是否尝试了z-index属性？bodyposition:absolute

的第三方内容时，它只会覆盖曲线。抱歉，忘记添加了。我确实在底部添加了

margintop:-15px

，它在Firefox和IE中也能正常工作，但在Chrome和IE中却不行Safari@LeeBurrows：仅仅因为它以问号结尾并不意味着它在寻求澄清。在这里，这是一个建议，删除“你能”和问号使其成为一个非常有效的答案，尽管答案很简短（如果不正确的话）。

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;