带有镶嵌边框的 CSS 圆圈

Question

我正尝试按照以下示例在 CSS 中创建一个带有镶嵌边框的圆圈:

我有以下 HTML 和 CSS，但它没有产生我需要的效果:

.inlay-circle {
  width: 15rem;
  height: 15rem;
  border: solid #a7a9ac 2px;
  border-radius: 50%;
}
.inlay-circle:before {
  top: 0.7rem;
  left: 0.5rem;
  position: absolute;
  content: '';
  width: 15rem;
  height: 15rem;
  border-right: solid #658d1b 0.6rem;
  border-radius: 50%;
  transform: rotate(45deg);
}

<div class="inlay-circle"></div>

如果您能帮助我们将镶嵌物变成方形并增加镶嵌物和主圆之间的间距，我们将不胜感激。

Answer 1

首先，我已将尺寸更改为像素，因为只使用一个单位更容易，但您当然可以将其改回。所以我将绿色边框设为 10px 厚。

您需要 3 个圆形部分才能实现此目的。一个用于灰色圆圈，一个用于绿色四分之一，一个用于实现两个可见部分之间的间隙。使用我暂时无法想到的其他方法可能可以实现差距。

首先，我将绿色边框移动到 ::after 伪选择器，这样我就可以在它下面放置一些东西来创建间隙(::before 伪选择器-选择器)

其次，为了避免你的绿色边框有增长/缩小的效果，你需要给整个绿色圆圈相同的大小(至少是 border-right 旁边的部分，即border-top 和 border-bottom)。这可以通过添加 10px 透明边框来完成:

border: solid transparent 10px;

为了补偿整个框的绿色边框因此而增长，我在左侧/顶部添加了负边距。

对于间隙，创建了第二个圆圈。这个有白色边框。这意味着它不适用于任何其他背景(但您可以更改此边框的颜色以匹配背景)。它变大了一点，并向左/顶部移动得更远，因此它的位置合适。

.inlay-circle {
  width: 15rem;
  height: 15rem;
  border: solid #a7a9ac 2px;
  border-radius: 50%;
}
.inlay-circle::after {
  margin-left: -15px;
  margin-top: -15px;
  position: absolute;
  content: '';
  width: 15rem;
  height: 15rem;
  border: solid transparent 10px;
  border-right: solid #658d1b 10px;
  border-radius: 50%;
  transform: rotate(45deg);

}
.inlay-circle::before {
  margin-left: -30px;
  margin-top: -30px;
  position: absolute;
  content: '';
  width: 15rem;
  height: 15rem;
  border: solid transparent 20px;
  border-right: solid white 20px;
  border-radius: 50%;
  transform: rotate(45deg);
}

<div class="inlay-circle"></div>