İki eğri eleman arasında görünen beyaz kenarlar nasıl kaldırılır?

Question

Chrome tarayıcısında çarpık HTML div'leri arasında beyaz bir çizgi görüyorum. İşte

kod var: Bu beyaz çizgi nasıl kaldırırım https://jsbin.com/dijazit/2/edit?html,css,output

:

.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%; 

} 

bir ayıklama örneği mevcuttur Aşağıda sorunun bir ekran görüntüsü nedir? Burada herhangi bir yardım için teşekkür ederiz.

Answer 1

Bu, Chrome'daki dönüştürülmüş öğeleri oluşturma konusunda bilinen bir sorundur. Bunu daha da garip yapan şey, birçok benzer konuya rastladığımız gerçeğidir ve önceki (çok benzer) durum için uygulanan düzeltme her defasında geçerli olan için çalışmaz hale gelir.

Bu özel senaryo için, öğelerin etrafında saydam 1 piksel kenarlık eklemek bunu düzeltiyor gibi görünüyor.

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

Answer 2

Bir piksel sola ikinci elemanı hareket edecektir. Bunu yerine:

left: 200px; 

kullanım:

Not:

left 199px; 

aşağıdaki pasajı bakın! Tam boyutları korumak için öğenin genişliğini 1px artırabilirsiniz. Yığın taşması için

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