Come rimuovere i bordi bianchi che appaiono tra due elementi inclinati?

Vedo una linea bianca tra le divisioni HTML distorte sul browser Chrome. Qui di seguito è uno screenshot del problema:Come rimuovere i bordi bianchi che appaiono tra due elementi inclinati?

Ecco il codice:

.abc { 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    backface-visibility: hidden; 
    width: 200px; 
    height: 200px; 
    background: green; 
    position: absolute; 
    left:0px; 
    transform: skewX(-10deg); 
    transform-origin: 0% 100%; 
} 

.def { 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    backface-visibility: hidden; 
    width: 200px; 
    height: 200px; 
    background: green; 
    position: absolute; 
    left:200px; 
    transform: skewX(-10deg); 
    transform-origin: 0% 100%; 

}

Un campione di debug è disponibile all'indirizzo: https://jsbin.com/dijazit/2/edit?html,css,output

Come si fa a rimuovere questa riga bianca? Apprezzo qualsiasi aiuto qui.

fonte

2016-03-29 moondram

Benvenuti a Stack Overflow! Le domande che richiedono l'aiuto del codice devono includere il codice più breve necessario per riprodurlo ** nella domanda stessa **. Sebbene tu abbia fornito un collegamento [** a un esempio **] (http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can- i-just-paste-a-link-to-it), se il link dovesse diventare non valido, la tua domanda non avrebbe alcun valore per altri futuri utenti SO con lo stesso problema. –

Non sarebbe una soluzione dare il tuo secondo div -199px invece di -200? quindi non c'è più nessuna linea bianca in cromo. Sarebbe una soluzione rapida ma sporca. –

Grazie a @Paulie_D, ha aggiornato il codice. – moondram

Questo è un problema noto per il rendering di elementi trasformati in Chrome. Ciò che lo rende più strano è il fatto che ci imbattiamo in molti problemi simili e ogni volta che la correzione applicata per il caso precedente (molto simile) finisce per non funzionare per quello attuale.

Per questo particolare scenario, l'aggiunta di un bordo trasparente di 1 pixel attorno agli elementi sembra risolverlo.

.abc { 
 
    position: absolute; 
 
    left: 0px; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: green; 
 
    transform-origin: 0% 100%; 
 
    transform: skewX(-10deg); 
 
    border: 1px solid transparent; 
 
} 
 
.def { 
 
    position: absolute; 
 
    left: 200px; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: green; 
 
    transform-origin: 0% 100%; 
 
    transform: skewX(-10deg); 
 
    border: 1px solid transparent; 
 
}

<div class="abc"></div> 
 
<div class="def"></div>

fonte

2016-03-29 16:46:58 Harry

Vorrei spostare il secondo elemento a sinistra di un pixel. Così, invece di:

left: 200px;

uso:

left 199px;

Vedi il frammento di seguito:

NB! Potresti anche voler aumentare la larghezza dell'elemento di 1 px per mantenere le dimensioni esatte.

.abc { 
 
    -webkit-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: green; 
 
    position: absolute; 
 
    left:0px; 
 
    transform: skewX(-10deg); 
 
    transform-origin: 0% 100%; 
 
} 
 

 
.def { 
 
    -webkit-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: green; 
 
    position: absolute; 
 
    left:199px; 
 
    transform: skewX(-10deg); 
 
    transform-origin: 0% 100%; 
 

 
}

<div class="abc"></div> 
 
<div class="def"></div>

fonte

2016-03-29 18:02:00

Come rimuovere i bordi bianchi che appaiono tra due elementi inclinati?

risposta

Problemi correlati