基于边框的三角形不按预期呈现 [英] Border based triangles not rendering as expected

问题描述

我想用4个旋转的三角形做一个完整的正方形，但是当我放置它们时，它们之间有一个很薄的空间。甚至weirder，当我旋转整个东西，线消失在chrome，但出现在firefox中的三角形的中间（再次形成一个X）。

I am trying to make a full square out of 4 rotated triangles, but when I position them, there is a thin space between. Even weirder, when I rotate the entire thing, the lines disappear in chrome, but appear in the middle of the triangle (forming an X again) in firefox.

>

jsFiddle

如何在不添加背景的情况下删除此行，且不会丢失任何大小？我尝试使用 translate3d ，但在每一种方式我尝试，它不是删除所有的行，或减少的方形，这不应该发生的大小。所有这一切都必须感觉很奇怪，所以这里是一个小调的最终产品解释为什么我这样做（只是删除 overflow：hidden 属性在css的顶部看到它背后的逻辑）：

How can I remove this line without adding background and without losing any of the size? I tried using translate3d, but in every way I tried, it either didn't remove all lines, or reduced the size of the square, which shouldn't happen. All this must feel really weird, so here's a fiddle with the final product to explain why I am doing this (just remove the overflow:hidden attribute at the top of the css to see the logic behind it):

jsFiddle

推荐答案

为什么会出现白线？

你创建一个div，它有边界，只是设置为默认属性。

所以有边界，但不完全？

在CSS中创建三角形真的是一个黑客。因此，我们使用边界的方式在那里没有意图。

通过设置边框的属性，以便他们创建一个三角形，你会创建一个看起来像像素宽，但真正的0.5像素的微小间隙。

哈哈你的开玩笑吧？

Why is there a white line?

When you create a div it has borders there all just set to the default property.
So there are borders there but not quite?
Creating triangles in CSS is really a hack. So we use borders in a way there where not intended.
By setting the properties of the borders so they create a triangle you will create a tiny gap that looks like a pixel wide, but its really 0.5px.
Haha your joking right?

不能将宽度设置为0.5px解决您的问题：

nope setting the width to 0.5px solves your problem:

.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

If you rotate a straight line 45 deg will it be 1px wide?
It will actually be 0.5px wide. Or atleast thats how it will be displayed. So by setting the width to 0.5px there wil be a 1px line?
...nope there will be a 0.25px wide gap.
And since browsers don't render at that size it will be displayed as 0px wide gap :D

为了避免微小的间隙，使用：

To avoid tiny gaps use:

看起来像是试图创建形状。

SVG是一个很好的解决方案。

Seems like your trying to create shapes.
SVG is a good solution for this.

所以我做的是使用javascript设置样式属性。
我看了你的fiddles，我看到你发布他们与旋转和进步。发现你简单可以设置 element.style.transfrom =rotate（+ amount +deg）旋转它。

So what i do is i set the style properties with javascript. I took a look at your fiddles and i saw you posted them with rotation as well as progress. Found out that you simple can set element.style.transfrom = "rotate("+amount+"deg)" to rotate it.

这个stroke-array是什么？

看看svg代码中有两个圆圈？

第二个有笔画，但不是填充。这将创建形状。

现在我们无法将该形状切割成碎片。

Stroke-dasharray：500; 剪切成500张。

将其设置为500,500是一个完整的圆形设置250，500将是一个半圆。

仍在跟着？

我们想对它进行动画处理，所以我们设置它的元素样式属性：

path.setAttribute（style，stroke-dasharray：+ i / 2 +px + length +;）;

将其 style 什么属性 stroke-dasharray ，然后设置它的长度到我们有多远 i / 2 + px 和ofcource第二个参数是其整圆长度。这是500.

What the hell is this stroke-array?
See how there are two circles in the svg code?
The second one has a stroke but not a fill. This creates the shape.
Now we cant to cut that shape into pieces.
Stroke-dasharray : 500; Now its cut into 500 pieces.
Setting it to 500, 500 is a full circle setting 250, 500 would be a half circle.
Still following?
And we want to animate it so we set its the elements style attribute:
path.setAttribute("style", "stroke-dasharray:" + i / 2 + "px ," + length + ";");
Animate its style. What property stroke-dasharray and then set its length to how far we have come i/2 +pxand ofcource the second parameter is its full circle length. and that's 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>

这篇关于基于边框的三角形不按预期呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！