CSS Überlauf versteckt kann nicht alle Elemente abdecken?

Question

.powder-box { 
 
    width: 51px; 
 
    height: 51px; 
 
    border-radius: 50%; 
 
    border: 2px solid #A5B2B5; 
 
    box-shadow: 0 1px 2px 0px #A5B2B5; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.powder-inner { 
 
    width: 45px; 
 
    height: 45px; 
 
    border: 2px solid white; 
 
    border-radius: 50%; 
 
    box-shadow: 0 4px 10px 0 #656565; 
 
    background-color: #00c690; 
 
    overflow: hidden; 
 
    margin: 1px; 
 
} 
 

 
.powder-wave { 
 
    background-color: white; 
 
    height: 70px; 
 
}

<div class="powder-box"> 
 
    <div class="powder-inner"> 
 
    <div class="powder-wave" style="margin-top: -54px"></div> 
 
    </div> 
 
</div>

.powder-Innenüberlauf versteckt, haben eine Grenze gibt. Es kann nicht alles abdecken. Wie kann ich alles abdecken? there is border there ?

Answer 1

aktualisieren .powder-inner Klasse mit border-top-left-radius: 0%; & border-top-right-radius: 0%; dann Top-grüne Kurve entfernen.

Siehe Ausgabe ist Browser zoomen Sie es und sehen Sie grüne Kurve.

.powder-inner { 
    width: 45px; 
    height: 45px; 
    border: 2px solid white; 
    border-radius: 49%; 
    box-shadow: 0 4px 10px 0 #656565; 
    background-color: #00c690; 
    overflow: hidden; 
    margin: 1px; 
    z-index: 2000; 
    border-top-left-radius: 0%; 
    border-top-right-radius: 0%; 
} 

.powder-box { 
 
    width: 51px; 
 
    height: 51px; 
 
    border-radius: 50%; 
 
    border: 2px solid #A5B2B5; 
 
    box-shadow: 0 1px 2px 0px #A5B2B5; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.powder-inner { 
 
    width: 45px; 
 
    height: 45px; 
 
    border: 2px solid white; 
 
    border-radius: 49%; 
 
    box-shadow: 0 4px 10px 0 #656565; 
 
    background-color: #00c690; 
 
    overflow: hidden; 
 
    margin: 1px; 
 
    z-index: 2000; 
 
    border-top-left-radius: 0%; 
 
    border-top-right-radius: 0%; 
 
} 
 

 
.powder-wave { 
 
    background-color: white; 
 
    height: 70px; 
 
}

<div class="powder-box"> 
 
    <div class="powder-inner"> 
 
    <div class="powder-wave" style="margin-top: -54px"></div> 
 
    </div> 
 
</div>

Answer 2

.powder-box { 
 
    width: 51px; 
 
    height: 51px; 
 
    border-radius: 50%; 
 
    border: 2px solid #A5B2B5; 
 
    box-shadow: 0 1px 2px 0px #A5B2B5; 
 
    overflow: hidden !important; 
 
    position: relative; 
 
} 
 

 
.powder-inner { 
 
    width: 45px; 
 
    height: 45px; 
 
    border: 2px solid white; 
 
    border-radius: 50%; 
 
    box-shadow: 0 4px 10px 0 #656565; 
 
    background-color: #00c690; 
 
    overflow:hidden !important; 
 
    margin: 1px; 
 
} 
 

 
.powder-wave { 
 
    background-color: white; 
 
    height: 70px; 
 
}

<div class="powder-box"> 
 
    <div class="powder-inner"> 
 
    <div class="powder-wave" style=""></div> 
 
    </div> 
 
</div>