Come posso eliminare il contorno bianco sottile nella metà superiore di questo cerchio?

Non riesco a liberarmi del sottile contorno bianco nella parte superiore di questo cerchio. Qualche idea su come aggiustarlo? JSFiddle Demo Come posso eliminare il contorno bianco sottile nella metà superiore di questo cerchio?

body { 
 
     background-color: black; 
 
     padding:50px; 
 
    } 
 
    .square { 
 
     background-color: white; 
 
     margin-bottom: 20px; 
 
     height: 200px; 
 
\t \t width: 200px; 
 
\t \t overflow: hidden; 
 
\t \t } 
 
    .halfSquare { 
 
\t \t background-color: #462a04; 
 
\t \t height: 100px; 
 
\t \t width: 200px; 
 
\t \t } 
 
    .circle { 
 
\t  background-color: white; 
 
\t \t height: 200px; 
 
\t \t width: 200px; 
 
\t \t border-radius: 50%; 
 
\t \t overflow: hidden; 
 
\t \t } 
 
    .halfCircle { 
 
\t \t background-color: #462a04; 
 
\t \t height: 100px; 
 
\t \t width: 200px; 
 
\t \t }

<body> 
 
    <div class="square"><div class="halfSquare"></div></div> 
 
    <div class="circle"><div class="halfCircle"></div></div> \t 
 
</body>

fonte

2015-05-20 NewsletterPoll

Imo non è possibile se si costruisce in questo modo. I pixel bianchi dovrebbero essere il punto in cui il "pixel marrone" sarebbe almeno un po '(meno di un pixel) fuori dalla scatola del suo contenitore. Pertanto sarebbe overflow e l'overflow è nascosto. Quindi il browser mostra invece il contenitore. – delbertooo

Stai vedendo questo perché il div contenente .circle ha uno sfondo bianco, che si perde attraverso. È possibile risolvere questo problema rimuovendo il fondo del div contenitore e l'aggiunta di un secondo div per il bianco semicerchio:

<div class="square"><div class="halfSquare"></div></div> 
<div class="circle"> 
    <div class="halfCircle"></div> 
    <div class="halfCircle2"> 
</div></div> 

.circle { 
    height: 200px; 
    width: 200px; 
    border-radius: 50%; 
    overflow: hidden; 
} 
.halfCircle { 
    background-color: #462a04; 
    height: 100px; 
    width: 200px; 
} 
.halfCircle2 { 
    background-color: white; 
    height: 100px; 
    width: 200px; 
}

https://jsfiddle.net/v9bLfkpx/1/

Prima:

enter image description here

Dopo:

enter image description here

fonte

2015-05-20 22:45:34 garryp

https://jsfiddle.net/Hastig/v9bLfkpx/4/ –

Grazie garryp questo funziona per me. Qualche idea del perché succede su un cerchio ma non su un quadrato? – NewsletterPoll

@NewsletterPoll Non si verifica su un quadrato perché i pixel del contenitore e del contenuto coincidono tra loro, ma non esiste una coincidenza così precisa quando è un segmento curvo, quindi diventa evidente a occhio nudo. – user2755140

Il contenitore deve essere trasparente. Il bordo bianco è dovuto al fatto che il contenitore ha uno sfondo bianco. Farlo in questo modo:

<div class="square"><div class="halfSquare"></div></div> 
<div class="circle"> 
    <div class="halfCircle2"></div> 
    <div class="halfCircle1"></div> 
</div>

e CSS:

 .circle { 
      height: 200px; 
      width: 200px; 
      border-radius: 50%; 
      overflow: hidden; 
     } 
     .halfCircle2 { 
      background-color: #462a04; 
      height: 100px; 
      width: 200px; 
     } 
     .halfCircle1 { 
      background-color: white; 
      height: 100px; 
      width: 200px; 
     }

The Fiddle: https://jsfiddle.net/v9bLfkpx/3/

fonte

2015-05-20 22:49:05 user2755140

Come posso eliminare il contorno bianco sottile nella metà superiore di questo cerchio?

risposta

Problemi correlati