css - Border based triangles not rendering as expected -

i trying make full square out of 4 rotated triangles, when position them, there thin space between. weirder, when rotate entire thing, lines disappear in chrome, appear in middle of triangle (forming x again) in firefox.

jsfiddle

how can remove line without adding background , without losing of size? tried using translate3d, in every way tried, either didn't remove lines, or reduced size of square, shouldn't happen. must feel weird, here's fiddle final product explain why doing (just remove overflow:hidden attribute @ top of css see logic behind it):

jsfiddle

why there white line?

when create div has borders there set default property.
there borders there not quite?
creating triangles in css hack. use borders in way there not intended.
setting properties of borders create triangle create tiny gap looks pixel wide, 0.5px.
haha joking right?

nope setting width 0.5px solves problem:

.wrapper {    width: 200px;    height: 200px;    margin: 50px;    position: relative;    border: 1px solid #f00;  }  .rotate {    transform: rotate(45deg);  }  .triangle {    width: 0.5px;    height: 0;    position: absolute;    left: 0;    right: ;    top: 0;    margin: auto;    border: 100px solid rgba(0, 0, 0, 0);    border-bottom-width: 0px;    border-top-color: #333;    transform-origin: center bottom;  }  .triangle:nth-child(2) {    transform: rotate(90deg);  }  .triangle:nth-child(3) {    transform: rotate(180deg);  }  .triangle:nth-child(4) {    transform: rotate(270deg);  }

<div class="wrapper">    <div class="triangle"></div>    <div class="triangle"></div>    <div class="triangle"></div>    <div class="triangle"></div>  </div>  <div class="wrapper rotate">    <div class="triangle"></div>    <div class="triangle"></div>    <div class="triangle"></div>    <div class="triangle"></div>  </div>

what the?

if rotate straight line 45 deg 1px wide?
0.5px wide. or atleast thats how displayed. setting width 0.5px there wil 1px line?
...nope there 0.25px wide gap.
, since browsers don't render @ size displayed 0px wide gap :d

to avoid tiny gaps use:

svg

seems trying create shapes.
svg solution this.

so set style properties javascript. took @ fiddles , saw posted them rotation progress. found out simple can set element.style.transfrom = "rotate("+amount+"deg)" rotate it.

what hell stroke-array?
see how there 2 circles in svg code?
second 1 has stroke not fill. creates shape.
cant cut shape pieces.
stroke-dasharray : 500; cut 500 pieces.
setting 500, 500 full circle setting 250, 500 half circle.
still following?
, want animate set elements style attribute:
path.setattribute("style", "stroke-dasharray:" + / 2 + "px ," + length + ";");
animate style. property stroke-dasharray , set length how far have come i/2 +pxand ofcource second parameter full circle length. , that's 500.

var path = document.queryselector('.progress');  var text = document.queryselector('.progress-text');  var style = window.getcomputedstyle(path);  var length = parseint(style.getpropertyvalue('stroke-dasharray'));  var = 0;  var count = 0;  var ticks = 100;    setinterval(function() {    if (i < length) {      path.setattribute("style", "stroke-dasharray:" + / 2 + "px ," + length + ";");      += length / ticks;      var turn = parsefloat(i / length * (360 * 8));      path.style.transform = 'rotate(' + turn + 'deg)';      //setting text      count++;      text.innerhtml = math.round((count / ticks) * 100);    }    }, 100);

.progress {    fill: none;    stroke: rgba(146, 245, 200, 05);    stroke-width: 5;    stroke-dasharray: 500;    stroke-linecap: round;    transform-origin: center center;  }  .back-cirlce {    fill: #222;  }  .progress-text {    font-size: 20px;    fill: rgba(146, 245, 200, 0.5);  }

<span>classic</span>  <svg width="100px" viewbox="0 0 100 100">    <circle class="back-circle" cx="50" cy="50" r="50" />    <circle class="progress" cx="50" cy="50" r="40" />    <text class="progress-text" text-anchor="middle" x="50" y="50">percentage</text>  </svg>  <span></span>