javascript - 在 html/css 中制作一个外圆分为 8 个部分

Question

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

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

<div class="loader"></div>

但这并没有达到我想要的效果。任何人都可以帮我解决这个问题。

标签： javascripthtmljquerycss

Answer 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>

显然，这可能不适合，也可能不适合，具体取决于您打算使用它的目的。