css transform - gaps (white points) between two shapes -

I connect multiple diagonal divs, so that a ring is created. But white pixels between different divs are interval depending on the zoom level. How can I fix this?

Here's my code:

< Pre> & lt ;! DOCTYPE html & gt; & Lt; Html ng-app = "o4iApp" & gt; & Lt; Top & gt; & Lt; Title & gt; Kompetenzatlas & lt; / Title & gt; & Lt; Meta name = "viewport" content = "width = device-width, initial-scale = 1.0" /> & Lt; Script data-required = "jquery @ *" data-save = "2.0.3" src = "http://code.jquery.com/jquery-2.0.3.min.js" & gt; & Lt; / Script & gt; & Lt; Script Data - RP = "Bootstrap @ *" Data-save = "3.1.1" src = "// netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">< / Script & gt; & Lt; Script Data-Required = "angular.js@*" Data-save = "1.2.13" src = "http://code.angularjs.org/1.2.13/angular.js" & gt; & Lt; / Script & gt; & Lt; Script Data - RP = "angular-ui-bootstrap @ *" Data-save = "0.10.0" src = "http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0 Min.js "& gt; & Lt; / Script & gt; & Lt; Script Data-Required = "Angle Route @ *" Data-save = "1.2.13" src = "http://code.angularjs.org/1.2.13/angular-route.js" & gt; & Lt; / Script & gt; & Lt; Script Data - RP = "Angular-Resource @ *" Data-save = "1.2.13" src = "http://code.angularjs.org/1.2.13/angular-resource.js" & gt; & Lt; / Script & gt; & Lt; Link Data - RP = "bootstrap-css@3.1.1" Data-save = "3.1.1" rel = "stylesheet" href = "// netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap .min .css "/> & Lt; Link rel = "stylesheet" href = "main.css" /> & Lt; Script src = "app.js" & gt; & Lt; / Script & gt; & Lt; Script src = "controller.js" & gt; & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div ng-view = "" & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;

You can see how it works

The problem in Firefox becomes very clear between the sections there are white lines.