嵌套div由圆形容器div掩盖

Question

我正在试图弄清楚是否有办法用CSS做到这一点：我有一个边框半径为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;
}

Answer 2

您可以使用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

Answer 3

我可能完全错过了一些东西，但你不能只添加“溢出：隐藏;”圆形元素#coupon_container？