Dziwna, cienka linia między sąsiednimi, wypaczonymi blokami z przezroczystością

Question

Mam problem z półprzezroczystymi blokami. Głównym problemem jest cienka linia między elementem "block" a jego pseudoelementem (wcześniej). Ten problem występuje we wszystkich nowoczesnych przeglądarkach komputerowych (Opera, Firefox, Chrome, ale nie wiem o Safari). kod poniżej:

HTML:

<div class="block"></div> 

CSS:

.block{ 
    position: relative; 
    width: 200px; 
    height: 200px; 
    margin-left: 100px; 
    background-color: rgba(0, 0, 0, 0.5); 
    transform: skewX(-21deg); 
} 
.block:before{ 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 100%; 
    width: 100px; 
    height:200px; 
    background-color: rgba(0, 0, 0, 0.5); 
} 

Przykład na jsfiddle: https://jsfiddle.net/Farmatique/xw877edw/

Nawet jeśli ustawić kolor tła krycie do 1, kwestia ta nadal pozostaje .

Każda pomoc/sugestie doceniane.

Answer 1

Jeszcze lepszym rozwiązaniem ...

Problemem jest uruchomiony na to ze względu na anti-aliased krawędziach skośnych elementów siedzą obok siebie. Przeglądarka robi wszystko, co w jej mocy, aby narysować gładkie, ustawione pod kątem krawędzie z pikselami i używa różnych, jaśniejszych, bardziej przejrzystych odcieni koloru tła, który wyznaczyłeś, aby dać wrażenie gładkiej krawędzi. "Linia", którą widzisz, to jaśniejsze, bardziej przezroczyste piksele, które pozwalają prześwitywać białe tło dokumentu pod spodem.

Zamiast przypisywania background-color dla elementu pseudo :before, przypisać right-border do klasy .block, tak:

.block{ 
     position: relative; 
     width: 200px; 
     height: 200px; 
     margin-left: 100px; 
     background-color: rgba(0, 0, 0, 0.5); 
     transform: skewX(-21deg); 
     border-right-width: 100px; 
     border-right-style: solid; 
     border-right-color: transparent; 
    } 

    .block:before{ 
     content: 'I\'m in the pseudo element'; 
     display: block; 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     left: 100%; 
     width: 100px; 
     height:200px; 
    } 

Ponieważ granica jest częścią elementu .blockdiv, nie ma już luka między kształty, a Twój pseudo element :before pojawi się nad obszarem granicy, tak jakby miał swój własny kolor tła.

Brak linii.

Answer 2

Problem, który napotykasz, jest spowodowany krawędziami przekrzywionych elementów. Przeglądarka robi wszystko, co w jej mocy, aby narysować gładkie, ustawione pod kątem krawędzie z pikselami i używa różnych, jaśniejszych, bardziej przejrzystych odcieni koloru tła, który wyznaczyłeś, aby dać wrażenie gładkiej krawędzi. "Linia", którą widzisz, to jaśniejsze, bardziej przezroczyste piksele, które pozwalają prześwitywać białe tło dokumentu pod spodem.

od podejścia CSS, można spróbować oszukać oko użytkownika z subtelnym box-shadow nieruchomości na :before stonować wygładzoną krawędź:

box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); 

razie potrzeby dostosować krycie aby sprawdzić, czy możesz znaleźć słodkie miejsce, które działa.

Innym pomysłem może być wypróbowanie koloru innego niż biały, jako tła za wypaczonymi elementami, aby złagodzić to, co prześwitywa.

Jednak zastrzeżenie tutaj polega na tym, że każde urządzenie będzie miało własną reprezentację kolorów wybranych dla tła i cienia, i będzie bardziej zauważalne dla niektórych, a nie dla innych.