title: Strange, thin line between adjacent, skewed blocks with transparency
body: <p>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:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="block"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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);
  }
  </code></pre>
  
  <p>Example on jsfiddle:
  <a href="https://jsfiddle.net/Farmatique/xw877edw/">https://jsfiddle.net/Farmatique/xw877edw/</a></p>
  
  <p>Even if I set background color opacity to 1, this issue still remains. </p>
  
  <p>Any help/suggestions appreciated.</p>