A strange, thin line between adjacent skewed blocks with transparency

Question

I have a problem with translucent blocks. The main problem is the thin line between the "block" element and its pseudo-element (before). This problem occurs in all modern desktop browsers (Opera, Firefox, Chrome. However, I do not know about Safari). Code below:

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

Jsfiddle example: https://jsfiddle.net/Farmatique/xw877edw/

Even if I set the background color opacity to 1, this question still remains.

Any help / suggestions appreciated.

Answer 1

An even better solution ...

The problem you are facing is related to the smoothing of the edges of the skewed elements located next to each other. The browser does its best to draw smooth corner edges with pixels, and it uses the different, lighter, more transparent shades of the background color that you marked to create the illusion of a smooth edge. The “line” you see is the lighter, more transparent pixels that allow the white background of the document below to shine.

Instead of assigning background-color to the :before pseudo-element :before assign right-border the .block class, for example:

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

Since the border is part of the .block div element, there is no longer a gap between the shapes, and your :before pseudo-element will appear above the border, as if it had its own background color.

There is no line.

Answer 2

The problem you are facing is related to the smooth edges of the skewed elements. The browser does its best to draw smooth corner edges with pixels, and it uses the different, lighter, more transparent shades of the background color that you marked to create the illusion of a smooth edge. The “line” you see is the lighter, more transparent pixels that allow the white background of the document below to shine.

From the CSS approach, you can try to trick the user's eye with the subtle box-shadow property on :before to soften the smooth edge:

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

Adjust the opacity if necessary to see if you can find a sweet spot that works.

Another idea might be to try a color other than white as a background behind skewed elements to soften what shines.

However, the caveat here is that each device will have its own representation of the colors selected for the background and shadow, and this will be more noticeable for some, and not for others.