Div有弯曲的边和溢出：隐藏在Chrome和Safari中

Question

以下是我想要完成的事情：http://jsfiddle.net/ShKNu/5/

如您所见，map div加载在main div之上，但overflow:hidden仅适用于Firefox和IE。在Chrome和Safari中，地图不会被切断，并会重叠到header div中。

• Firefox：Works
• IE：Works
• 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;
}