我试图用 4 个旋转的三角形制作一个完整的正方形，但是当我放置它们时，它们之间有一个很薄的空间。更奇怪的是，当我旋转整个东西时，线条在 Chrome 中消失，但在 Firefox 中出现在三角形的中间（再次形成 X）。
jsFiddle http://jsfiddle.net/awo1gk4z/7/
如何在不添加背景且不丢失任何尺寸的情况下删除这条线？我尝试使用translate3d，但在我尝试的各种方法中，它要么没有删除所有线条，要么减小了正方形的大小，这是不应该发生的。所有这些一定感觉很奇怪，所以这里有一个最终产品的摆弄来解释我为什么这样做（只需删除overflow:hiddencss 顶部的属性以查看其背后的逻辑）：
jsFiddle http://jsfiddle.net/2hx0r37o/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 度，它的宽度会是 1 像素吗？
它实际上是 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 为半圆。
还在关注吗？
我们想要让它动起来，所以我们设置它的 elements 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
