Div曲面弯曲且溢出：隐藏在Chrome和Safari中

Question

我正在尝试完成以下任务： http : //jsfiddle.net/ShKNu/5/

如您所见，地图div加载在main div的顶部，但是overflow:hidden仅在Firefox和IE中有效。 在Chrome和Safari中，地图不会被截断，而是与header div重叠。

• Firefox：作品
• IE：作品
• Chrome：不起作用
• Safari：不起作用

有任何想法吗？

Answer 1

希望您正在寻找吗？

.main {
display:block;
background: #999;
width: 100%;
height: 500px;
margin-top: -30px;
overflow: hidden;
position:relative;
border-radius: 50% 50% 0 0 / 30px 30px 0 0;
-moz-border-radius: 50% 50% 0 0 / 30px 30px 0 0;
-webkit-border-radius: 50% 50% 0 0 / 30px 30px 0 0;
}