css - 基于边框的三 Angular 形未按预期呈现

Question

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

jsFiddle

如何在不添加背景且不丢失任何尺寸的情况下删除此行？我尝试使用 translate3d，但在我尝试的所有方法中，它要么没有删除所有行，要么没有减小正方形的大小，这是不应该发生的。所有这一切一定感觉很奇怪，所以这里有一个最终产品的 fiddle 来解释我为什么这样做(只需删除 css 顶部的 overflow:hidden 属性以查看其背后的逻辑) :

jsFiddle

Answer 1

为什么有一条白线？

当您创建一个 div 时，它的边框都设置为默认属性。
所以那里有边界但不完全是？
在 CSS 中创建三 Angular 形真的是一个 hack。因此，我们以一种非预期的方式使用边框。
通过设置边框的属性，使它们创建一个三 Angular 形，您将创建一个看起来像像素宽但实际上只有 0.5 像素的微小间隙。
哈哈你在开玩笑吧？

将宽度设置为 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>

什么？

如果将一条直线旋转 45 度，它会变成 1px 宽吗？
它实际上是 0.5px 宽。或者至少这就是它的显示方式。那么通过将宽度设置为 0.5px 会有一条 1px 的线？
...不会有 0.25px 宽的间隙。
由于浏览器不会以该尺寸呈现，因此它将显示为 0px 宽间隙 :D

为避免出现微小间隙，请使用:

SVG

您似乎在尝试创建形状。
SVG 是一个很好的解决方案。

所以我所做的是使用 javascript 设置样式属性。我看了看你的 fiddle ，我看到你张贴了他们的轮换和进步。发现您可以简单地设置 element.style.transfrom = "rotate("+amount+"deg)" 来旋转它。

这个stroke-array是什么鬼？
看看svg代码里怎么有两个圆圈？
第二个有描边但没有填充。这样就形成了形状。
现在我们不能把那个形状切成碎片了。
stroke-dasharray : 500; 现在它被切成 500 block 。
设置为500，500是一个完整的圆设置250，500是一个半圆。
还在关注吗？
我们想让它动起来，所以我们设置它的元素样式属性:
path.setAttribute("style", "stroke-dasharray:"+ i/2 + "px,"+ length + ";");
为其样式设置动画。什么属性 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>