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