带镶嵌边框的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;

为了补偿由于绿色边框增加而导致的整个盒子，我在左侧/顶部添加了负边距。

对于间隙，创建第二个圆。这有一个白色边框。这意味着它将无法在任何其他背景下使用（但是您可以更改此边框的颜色以匹配背景）。它更大一些，并向左/上移，以便正确定位。

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);
}