Jak mogę pozbyć się cienkiego białego konturu w górnej połowie tego okręgu?

Nie mogę pozbyć się cienkiego białego konturu w górnej połowie tego okręgu. Wszelkie pomysły, jak to naprawić? JSFiddle Demo Jak mogę pozbyć się cienkiego białego konturu w górnej połowie tego okręgu?

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>

Źródło

2015-05-20 NewsletterPoll

Imo nie można Jeśli budować, to w ten sposób. Białe piksele powinny być punktem, w którym "brązowy piksel" byłby co najmniej nieco (mniej niż piksel) z pudełka jego pojemnika. W związku z tym będzie to przepełnienie i przepełnienie zostanie ukryte. Dlatego przeglądarka wyświetla kontener. – delbertooo

Widzisz to, bo zawierające div .circle ma białe tło, które przecieka przez. Można rozwiązać ten problem poprzez usunięcie tła na zawierającego div i dodanie drugiego div do białego półkolu:

<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/

Przed:

enter image description here

Po:

enter image description here

Źródło

2015-05-20 22:45:34 garryp

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

Dzięki garryp to działa dla mnie. Masz pomysł, dlaczego dzieje się na okręgu, ale nie na kwadracie? – NewsletterPoll

@NewsletterPoll Nie dzieje się na kwadracie, ponieważ piksele w pojemniku i zawarte w nim są zbieżne, ale nie ma takiej dokładnej zbieżności, gdy jest zakrzywiony segment, więc staje się zauważalny dla nieuzbrojonego oka. – user2755140

Pojemnik musi być przezroczysty. Biała ramka wynika z faktu, że pojemnik ma białe tło. Zrobić to w ten sposób:

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

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

skrzypcach: https://jsfiddle.net/v9bLfkpx/3/

Źródło

2015-05-20 22:49:05 user2755140

Jak mogę pozbyć się cienkiego białego konturu w górnej połowie tego okręgu?

Odpowiedz

Powiązane problemy