由圓形容器div掩蓋的嵌套div

Question

我想弄清楚是否有辦法用CSS來做到這一點：我有一個邊界半徑爲50％（圓形）的容器div。裏面是一個矩形格子，高度爲30％，位於容器的底部，我希望能夠將其遮蓋，以便容器圓角邊框外的任何內容都不會顯示出來。我該如何做到這一點？附件中是什麼目前發生的截圖，這是我的代碼：

<div id="coupon_container"> 
    <div id="meter_container">50c off</div> 
</div> 

#coupon_container { 
    position: fixed; right:0; top:0; z-index: 100; color: #fff; width:170px; height: 120px; 
    #meter_container { 
     position: absolute; width: 110px; height:110px; .round; background: @greenDk; border:5px solid #fff; left: 60px; overflow: hidden; 
     .meter_level { width: 100%; height:30%; position: absolute; bottom:0; text-align: center; font-size: 1.6em; background: @limeLt; } 
    } 
} 

Answer 1

我真的很喜歡the gradient solution that bookcasey已經發布。但是，兼容性可能是一個缺點，因爲IE9不支持CSS漸變。因此，另一種解決方案是這樣：

demo

的想法是用70％的頂部填充，而不是絕對定位。

HTML：

<div id="coupon_container"> 
    <div id="meter_container">50c off</div> 
</div> 

CSS：

#coupon_container { 
    overflow: hidden; 
    width: 8em; height: 8em; 
    border-radius: 50%; 
    background: green; 
} 
#meter_container { 
    margin: 70% 0; 
    height: 30%; 
    text-align: center; 
    background: lime; 
} 

Answer 2

我完全失去了一些東西，但不能你只需要添加「溢出：隱藏;」到圓形元素#coupon_container？

Answer 3

你可以達到你想要使用CSS3漸變效果：

#coupon_container { 
    width: 100px; 
    height: 100px; 
    border-radius: 100px; 
    background: -webkit-gradient(linear, 50% 0%, 50% 70, color-stop(100%, #fa8072), color-stop(100%, #ff0000)); 
    background: -webkit-linear-gradient(top, #fa8072 70px, #ff0000 70px); 
    background: -moz-linear-gradient(top, #fa8072 70px, #ff0000 70px); 
    background: -o-linear-gradient(top, #fa8072 70px, #ff0000 70px); 
    background: linear-gradient(top, #fa8072 70px, #ff0000 70px); 
    position: relative; 
} 

#meter_container { 
    width: 100px; 
    text-align: center; 
    position: absolute; 
    bottom: 10px; 
} 

Demo