How to remove the white edges that appear in between two skewed elements?
This is kind of a known issue with respect to rendering transformed elements in Chrome. What makes it more weird is the fact that we come across many similar issues and each time the fix applied for the previous (very similar) case ends up not working 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>
I would move the second element left by one pixel. So instead of:
left: 200px;use:
left 199px;See the snippet below:
NB! You could also want to increase the width of the element by 1px to keep the exact 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>