在html / css中制作一个外圈分为8个部分[重复]答案

【问题标题】：Making a outer circle divided in 8 parts in html/css [duplicate]在html / css中制作一个外圈分为8个部分[重复]
【发布时间】：2020-09-05 06:21:49
【问题描述】：

我想用 html/css 来做这样的事情。我有一个内圈的图像，但我很难将外圈分成 8 个部分。我已经为外圈尝试了下面的这种方法

.loader {
  border: dashed grey;
  border-width: 25px 25px;
  border-radius: 50%;
  width: 120px;
  height: 120px;
}

&lt;div class="loader"&gt;&lt;/div&gt;

但这并没有达到我想要的效果。谁能帮我解决这个问题。

【问题讨论】：

背景需要透明吗？（Aka，这会显示在纯色以外的任何东西上吗？你想要不透明度吗？）如果是这样，我可能会诚实地考虑使用画布。如果没有，应该可以用 3 个圆圈和一些旋转的线。
不，它不需要是透明的。

标签： javascript html jquery css

【解决方案1】：

您可以通过以下方式构建这样的形状：

我们使用了 3 个同心圆，每个圆都以同一个点为中心（中间的圆在那里假装背景颜色）然后我们添加 4 条线，它们被定位和旋转以将外圆分成 8 段。

.outer {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-color: #555;
}

.mid {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background-color: #FFF;
}

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #555;
}

.line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #FFF;
}

.line1 {
  transform: rotate(22.5deg);
}
.line2 {
  transform: rotate(67.5deg);
}
.line3 {
  transform: rotate(112.5deg);
}
.line4 {
  transform: rotate(157.5deg);
}

<div class="outer">
  <div class="line line1"></div>
  <div class="line line2"></div>
  <div class="line line3"></div>
  <div class="line line4"></div>
  <div class="mid">
    <div class="inner"></div>
  </div>
</div>

显然，这可能或很多不适合，具体取决于您的目标用途。

【讨论】：

【解决方案2】：

您可以使用线性渐变来实现该效果。当设置为透明度从 0% 到 50% - 1px 时，单个渐变可以是 2px 线，设置为 50% 的颜色，以及再次从 50% + 1px 直到结束的透明度。

由于您需要 8 个部分，因此您需要 4 行。每个部分必须彼此相距360deg / 8 度，所以45deg。

另外，不是线条，而是瓦片本身位于 0 / 90 度标记处，因此需要有 45deg / 2 -> 22.5deg 的偏移量

由于您可以在背景中堆叠任意数量的渐变，一个元素足以绘制八条线，每条线 45deg 彼此分开，偏移量为 22.5deg

.loader-outer {
width: 300px;
height: 300px;
background: linear-gradient(
    22.5deg,
    transparent calc(50% - 1px),
    #fff 50%,
    transparent calc(50% + 1px)
  ),
  linear-gradient(
    -22.5deg,
    transparent calc(50% - 1px),
    #fff 50%,
    transparent calc(50% + 1px)
  ),
  linear-gradient(
    112.5deg,
    transparent calc(50% - 1px),
    #fff 50%,
    transparent calc(50% + 1px)
  ),
  linear-gradient(
    68.5deg,
    transparent calc(50% - 1px),
    #fff 50%,
    transparent calc(50% + 1px)
  );
  
  background-color: gray;
  border-radius: 50%;
}

&lt;div class="loader-outer"&gt;&lt;/div&gt;

你说你不需要透明度，所以你可以把可视化的内部部分用线条画在那个圆圈上。

【讨论】：

嘿@ThomasAltman 感谢您先回答。但是我确实需要以编程方式更改这个圆圈的每个分区的颜色，如果可能的话，你能指点一下吗？
当然，您可以使用您想要的颜色，而不是使用透明度。我会更新我的答案 - 更新：不幸的是不是那么简单。你总是可以只使用 SVG，我想要一种仅 html/css 的方法，但着色并没有像我想象的那样工作