javascript - 可能有圆形/flex 的一面，而不是 Angular 落？

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 flex ，而主体在下面，但我认为这是不可能的(标题将包含填充图像)

编辑:忘记提及。通过上面的代码，并将 margin-top:-15px 添加到底部的 div，它在 Firefox 和 IE 中确实有效，但在 Chrome 和 Safari 中无效。 map 和 slider 仍然转到标题 div 并且没有被切断。

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

^ 这就是我目前的情况。如您所见， map 并没有在曲线上被 chop ，而是直接进入标题。

Answer 1

你的方向是正确的

将曲线放在带有overflow: hidden 和负margin-top 的“body”或.main 部分是一个好方法去。要解决有关 position: absolute 的第 3 方内容的问题，您只需确保您的 .main 具有 position: relative。

Here is a fiddle在 .main 中包含定位和非定位内容(注意:为了演示，我调整了曲线使其更加突出)。

它在 IE9+、Chrome 和 FF 中测试良好。显然，放置在 header 或 .main 之外的其他地方的任何第 3 方内容不一定会被隐藏，但这是可以预料的。然而，即使这样也可以通过适当的定位(relative)和 z 索引(main 高于 header)设置来解决，如 this fiddle显示。