How to remove white edges that appear between two skewed elements?

Question

I see a white line between the skewed HTML divs in the Chrome browser. Below is a screenshot:

Here is the code:

.abc { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; width: 200px; height: 200px; background: green; position: absolute; left:0px; transform: skewX(-10deg); transform-origin: 0% 100%; } .def { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; width: 200px; height: 200px; background: green; position: absolute; left:200px; transform: skewX(-10deg); transform-origin: 0% 100%; } 

Debugging is available at: https://jsbin.com/dijazit/2/edit?html,css,output

How to remove this white line? Appreciate any help here.

Answer 1

This is a kind of known issue regarding the rendering of converted elements in Chrome. What makes it stranger is that we encounter many similar problems, and every time the fix applied for the previous (very similar) case ends, does not work for the current one.

For this particular scenario, adding a transparent 1-pixel border around the elements seems to fix it.

 .abc { position: absolute; left: 0px; width: 200px; height: 200px; background: green; transform-origin: 0% 100%; transform: skewX(-10deg); border: 1px solid transparent; } .def { position: absolute; left: 200px; width: 200px; height: 200px; background: green; transform-origin: 0% 100%; transform: skewX(-10deg); border: 1px solid transparent; } 

 <div class="abc"></div> <div class="def"></div> 

Answer 2

I would move the second element remaining one pixel. Therefore, instead of:

 left: 200px; 

using:

 left 199px; 

See the snippet below:

NB! You can also increase the width of an element by 1px to maintain accurate dimensions.

 .abc { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; width: 200px; height: 200px; background: green; position: absolute; left:0px; transform: skewX(-10deg); transform-origin: 0% 100%; } .def { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; width: 200px; height: 200px; background: green; position: absolute; left:199px; transform: skewX(-10deg); transform-origin: 0% 100%; } 

 <div class="abc"></div> <div class="def"></div>