基于边框的三角形未按预期呈现

Question

我试图用4个旋转的三角形制作一个完整的正方形，但是当我定位它们时，它们之间有一个很小的空间。甚至更奇怪，当我旋转整个东西时，线条在chrome中消失，但在firefox中出现在三角形的中间（再次形成X）。

jsFiddle

如何在不添加背景且不丢失任何尺寸的情况下删除此行？我尝试使用translate3d，但在我试过的各种方式中，它要么没有删除所有线条，要么缩小了方块的大小，这不应该发生。所有这一切都必须感觉很奇怪，所以这里有一个最终产品来解释我为什么这样做（只需删除css顶部的overflow:hidden属性以查看其背后的逻辑）：< / p>

jsFiddle

Answer 1

为什么会出现白线？

当你创建一个div时，它有边框，只是设置为默认属性 那里有边界但不完全相同？
在CSS中创建三角形实际上是一种破解。所以我们在那里没有打算使用边框。
通过设置边框的属性，使它们创建一个三角形，您将创建一个看起来像像素宽的微小间隙，但它实际上是0.5px。 哈哈，你的开玩笑吧？

nope将宽度设置为0.5px可以解决您的问题：

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

什么？

如果你将直线旋转45度，它将是1px宽吗？ 它实际上是0.5px宽。或者至少它是如何显示的。 因此，通过将宽度设置为0.5px，将是1px线？ ......不会有0.25px宽的间隙 由于浏览器不会以该大小呈现，因此它将显示为0px宽的间隙：D

为避免微小差距，请使用：

SVG

好像你试图创造形状 SVG是一个很好的解决方案。

所以我做的是用javascript设置样式属性。 我看了看你的小提琴，我看到你发布了它们的轮换和进展。发现你很简单可以设置element.style.transfrom = "rotate("+amount+"deg)"来旋转它。

这个中风阵列到底是什么？ 看看svg代码中有两个圆圈？
第二个有中风但不是填充。这样就形成了形状 现在我们不能将这种形状切成碎片 Stroke-dasharray : 500;现在它被切成500件 将其设置为500,500是一个完整的圆形设置250,500将是一个半圆 还在关注？
我们想要设置它的动画，所以我们设置了它的元素样式属性：
path.setAttribute("style", "stroke-dasharray:" + i / 2 + "px ," + length + ";");
动画显示style。什么属性stroke-dasharray然后将其长度设置为我们到达的距离i/2 +px和第二个参数的源数是它的整圆长度。那是500。

＆＃13;

＆＃13;

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);

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;