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

Question

我试图用 4 个旋转的三角形制作一个完整的正方形，但是当我放置它们时，它们之间有一个薄的 space。更奇怪的是，当我旋转整个东西时，线条在 chrome 中消失，但在 Firefox 中出现在三角形的中间（再次形成 X）。

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

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>

什么？

如果将一条直线旋转 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.

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>

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

Border based triangles not rendering as expected

css

rendering

border

css-shapes

为什么会有一条白线？

SVG