Boundary triangles do not display as expected.

Question

I try to make a full square of 4 rotating triangles, but when I place them, there is a thin space between them. Even stranger, when I rotate the whole thing, the lines disappear in chrome, but appear in the middle of the triangle (forming X again) in firefox.

jsFiddle

How can I delete this line without adding a background and without losing any size? I tried to use translate3d, but in all respects I tried, he either did not delete all the lines, or reduced the size of the square, which should not have happened. All this should be very strange, so here is the fiddle with the final product to explain why I am doing this (just remove the attribute overflow:hiddenat the top of css to see the logic behind it):

jsFiddle

Answer 1

?

div, , .
, , ?
CSS - . , .
, , , , 0.5px.
-, ?

0.5px, :

.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>

Hide result

?

45 , 1px?
0.5px. , , . , 0.5px, 1px ?
... , 0,25 .
, 0px: D

, :

SVG

, .
SVG - .

, , javascript. , , , . , element.style.transfrom = "rotate("+amount+"deg)", .

?
, svg ?
, . .
.
Stroke-dasharray : 500; 500 .
500, 500, 250, 500 .
?
, style :
path.setAttribute("style", "stroke-dasharray:" + i / 2 + "px ," + length + ";");
style. stroke-dasharray, , i/2 +px, - . 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 i = 0;
var count = 0;
var ticks = 100;

setInterval(function() {
  if (i < length) {
    path.setAttribute("style", "stroke-dasharray:" + i / 2 + "px ," + length + ";");
    i += length / ticks;
    var turn = parseFloat(i / length * (360 * 8));
    path.style.transform = 'rotate(' + turn + 'deg)';
    //setting the 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>

Hide result