css – 基于边框的三角形无法按预期呈现

2023年8月23日 258次阅读

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

jsFiddle

如何在不添加背景且不丢失任何尺寸的情况下删除此行？我尝试使用translate3d,但在我试过的各种方式中,它要么没有删除所有行,要么减小了正方形的大小,这不应该发生.所有这些都必须感觉很奇怪,所以这里有一个最终产品的小提琴来解释我为什么这样做(只需删除css顶部的overflow：hidden属性以查看它背后的逻辑)：

jsFiddle

最佳答案 为什么会有白线？

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

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

.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“;”);
动画风格.什么属性stroke-dasharray然后设置它的长度到我们已经到达的距离i / 2 pxand ofcource第二个参数是它的整圆长度.那是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>
点赞