css - 嵌套的 div 被圆形容器 div 屏蔽掉

Question

我正在尝试弄清楚是否有一种方法可以使用 CSS 执行此操作:我有一个 border-radius 为 50%(圆形)的容器 div。其中有一个位于容器底部的高度为 30% 的矩形 div，我希望能够将其屏蔽掉，以便容器的圆形边框半径之外的任何内容都不会显示。我该如何做到这一点？附件是当前正在发生的事情的屏幕截图，这是我的代码:

<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;
}