Strange, thin line between adjacent, skewed blocks with transparency

Question

I have an issue with semi-transparent blocks. The main problem is in thin line between the "block" element and its pseudo element (before). This issue appears in every modern desktop browsers (Opera, Firefox, Chrome. Dont know about Safari, though). 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);
}

Example on jsfiddle: https://jsfiddle.net/Farmatique/xw877edw/

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

Any help/suggestions appreciated.

Answer 1

An even better solution...

The problem you are running into is due to the anti-aliased edges of the skewed elements sitting next to one another. The browser is doing its best to draw smooth, angled edges with pixels, and it uses various, lighter, more transparent shades of the background color you have designated, to give the illusion of a smooth edge. The "line" you are seeing is the lighter, more transparent pixels, which are allowing the white background of the document beneath, to shine through.

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

    .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 shapes, and your :before pseudo element will appear over the border area, as if it had its own background color.

No more line.