3

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

ここに画像の説明を入力

4

3 に答える 3

3

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;
}
于 2012-10-18T23:11:19.733 に答える
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;
}

デモ

于 2012-10-18T22:12:57.427 に答える
0

何かが完全に欠けている可能性がありますが、「overflow: hidden;」を追加することはできませんか? 丸い要素 #coupon_container?

于 2012-10-18T22:06:10.177 に答える