Saydam, çarpık bloklar arasında tuhaf, ince çizgi Saydamlık

Question

Yarı saydam bloklarla ilgili bir sorunum var. Asıl sorun, "blok" eleman ve onun sahte elemanı (daha önce) arasında ince çizgidir. Bu sorun her modern masaüstü tarayıcısında (Opera, Firefox, Chrome) görünür. Aşağıdaki Kodu:

HTML:

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

CSS: jsfiddle üzerine

.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); 
} 

Örnek: https://jsfiddle.net/Farmatique/xw877edw/

belirlediğim bile arka plan rengini donukluk 1'e, bu konu hala devam etmektedir .

Herhangi bir yardım/öneri takdir edildi.

Answer 1

Çok daha iyi bir çözüm ...

içine çalıştıran sorun birbirlerine yanında oturan çarpık elemanların anti-aliased kenarlarına kaynaklanmaktadır. Tarayıcı pürüzsüz, açılı kenarları piksellerle çizmek için elinden geleni yapıyor ve pürüzsüz bir kenarın yanılsamasını vermek için, belirttiğiniz arka plan renginin çeşitli, daha açık, daha saydam tonlarını kullanıyor. Gördüğünüz "çizgi", altındaki belgenin beyaz arka planının parlamasına izin veren daha açık, daha saydam piksellerdir.

yerine :before sözde elemanı için background-color atama, atama right-border.block sınıfa, böyle bir:

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

sınır .blockdiv elemanın bir parçası olduğundan

, artık arasında bir boşluk olduğunu şekilleri ve :before sözde öğeniz kendi arka plan rengine sahipmiş gibi kenarlık alanı üzerinde görünecektir.

Artık hat yok.

Answer 2

Karşılaştığınız sorun, eğrilmiş öğelerin anti-aliased kenarlarından kaynaklanıyor. Tarayıcı pürüzsüz, açılı kenarları piksellerle çizmek için elinden geleni yapıyor ve pürüzsüz bir kenarın yanılsamasını vermek için, belirttiğiniz arka plan renginin çeşitli, daha açık, daha saydam tonlarını kullanıyor. Gördüğünüz "çizgi", altındaki belgenin beyaz arka planının parlamasına izin veren daha açık, daha saydam piksellerdir.

Gerekirse

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

, olmadığını görmek için opaklığını ayarlamak:

CSS yaklaşımından

, sen yumuşatılmış kenar yumuşatmak için :before üzerinde ince bir box-shadow özelliğiyle kullanıcının gözü aldatmak için deneyebilirsiniz işe yarayan tatlı bir yer bulabilirsin.

Başka bir fikir, parıltılı öğelerin arkasındaki arka plan olarak, beyazın dışında bir rengin nasıl parlaması gerektiğini ortaya çıkarmak olabilir. Bununla birlikte, buradaki uyarı, her aygıtın arka plan ve gölge için seçilen renklerin kendi temsiline sahip olacağıdır ve bazıları için daha fazla dikkat çekicidir ve diğerleri için çok fazla değildir.