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

Question

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

如您所见，地图 div 加载在maindiv 之上，但overflow:hidden仅适用于 Firefox 和 IE。在 Chrome 和 Safari 中，地图不会被截断，而是重叠到headerdiv 中。

• 火狐：工作
• 即：作品
• 铬：不工作
• 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;
}