css - 嵌套 div 被圆形容器 div 掩盖

Question

我试图弄清楚是否有办法用 CSS 做到这一点：我有一个边框半径为 50%（圆形）的容器 div。其内部是一个矩形 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

我真的很喜欢bookcasey发布的渐变解决方案。然而，兼容性可能是一个缺点，因为 IE9 不支持 CSS 渐变。所以另一种解决方案是这个：

演示

这个想法是使用 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;
}

演示

Answer 3

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