可能具有圓形/彎曲的側面，而不是角落？

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彎曲，然后將主體放到下面，但是我認為這是不可能的（標題將包含一個填充的圖像）

編輯 ：忘了提。 使用上面的代碼，並在底部div中添加margin-top:-15px ，它確實可以在Firefox和IE中工作，但不能在Chrome和Safari中工作。 地圖和滑塊仍移至Header div，並且沒有被截斷。

編輯2 http://jsfiddle.net/ShKNu/4/

^這就是我目前的情況。 如您所見，地圖不會在曲線上被切除，而是直接進入標題。

Answer 1

你朝着正確的方向前進

將曲線放在“主體”或.main部分上時會產生overflow: hidden且margin-top負值margin-top是一種不錯的方法。 要解決position: absolute為第三方的第三方問題，只需確保您的.main position: relative 。

這是一個在.main包含定位和非定位內容的.main （請注意：我對曲線進行了調整，使其在演示中更加突出）。

它可以在IE9 +，Chrome和FF中正常測試。 顯然，放置在標頭中或.main之外的其他任何第三方內容都不一定是隱藏的，但是應該可以預期的。 然而，即使如此，也可以通過適當的定位（ relative ）和z-indexing（ main高於header ）設置來解決，如該小提琴所示。

Answer 2

嘗試使用margin:-20px或其他度量。