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

Answer 2

这是一个 css 方法，但最好是 svg ！

.inlay-circle {
  width: 15rem;
  height: 15rem;
  border: solid #a7a9ac 2px;
  border-radius: 50%;
}
.border-cut {
  top: 0;
  left: 3px;
  position: absolute;
  width: 15rem;
  height: 15rem;
  z-index:1;
  border-right: solid #658d1b 0.6rem;
    border-top: solid transparent 0.6rem;
    border-bottom: solid transparent 0.6rem;
  border-radius: 50%;
  transform: rotate(20deg);
}
.border-cut-white{
    top: -11px;
    left: -15px;
  position: absolute;
  width:  16rem;
  height:  16rem;
  z-index:0;
  border-right: solid white 0.6rem;
    border-top: solid transparent 0.6rem;
    border-bottom: solid transparent 0.6rem;
  border-radius: 50%;
  transform: rotate(20deg);
}

<div class="inlay-circle">
  <div class="border-cut"></div>
  <div class="border-cut-white"></div>
</div>

Answer 3

试试这个:)

 .outter-circle {
    width: 200px;
    height: 200px;
    border:5px solid lightgrey;
    border-radius: 50%;
  }
  
  .inner-box {
    width: 55%;
    height: 55%;
    border: 5px solid transparent;
    position: relative;
    top: 48%;
    left: 48%;
    background: white;
    overflow: hidden;
  }

  .inner-circle {
    width: 200px;
    height: 200px;
    border: 8px solid green;
    border-radius: 50%;
    transform: translate(-51%, -51%);
  }

<div class="outter-circle">
  <div class="inner-box">
    <div class="inner-circle"></div>
  </div>
</div>

Answer 4

基于my previous answer，我会考虑与剪辑路径相同的技巧。这个想法是使用两个相反的剪辑路径来显示/隐藏不同的部分，同时考虑一些差距。

我正在使用 CSS 变量来轻松控制大小、间隙和颜色：

.palette {
  --g:5px; /* The gap between shapes*/
  --s:10px; /* the size*/

  height: 200px;
  width: 200px;
  position:relative;
  display:inline-block;
  overflow:hidden;
}
.palette:before,
.palette:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border:var(--s) solid var(--c,blue);
  border-radius:50%;
  clip-path:polygon(
    calc(50% + var(--g)/2) 50%, 
    calc(50% + var(--g)/2) 0%, 
    100% 0%,
    100% calc(33.745% - var(--g)/2),
    50% calc(50% - var(--g)/2)); 
}
.palette:after {
 clip-path:polygon(
    calc(50% - var(--g)/2) 50%, 
    calc(50% - var(--g)/2) 0%, 
    0% 0%,0% 100%,100% 100%,
    100% calc(33.745% + var(--g)/2),
    50% calc(50% + var(--g)/2)); 
  --c:orange;
  border-width:calc(var(--s)/2);  
  top:calc(var(--s)/4);
  left:calc(var(--s)/4);
  right:calc(var(--s)/4);
  bottom:calc(var(--s)/4);
}

body {
 background:#f2f2f2;
}

<div class="palette">
</div>

<div class="palette" style="--s:40px;--g:20px">
</div>

<div class="palette" style="--s:8px;--g:10px">
</div>

您可以应用旋转来控制嵌体边框的位置开始

.palette {
  --g:5px; /* The gap between shapes*/
  --s:10px; /* the size*/

  height: 200px;
  width: 200px;
  position:relative;
  display:inline-block;
  overflow:hidden;
}
.palette:before,
.palette:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border:var(--s) solid var(--c,blue);
  border-radius:50%;
  clip-path:polygon(
    calc(50% + var(--g)/2) 50%, 
    calc(50% + var(--g)/2) 0%, 
    100% 0%,
    100% calc(33.745% - var(--g)/2),
    50% calc(50% - var(--g)/2)); 
}
.palette:after {
 clip-path:polygon(
    calc(50% - var(--g)/2) 50%, 
    calc(50% - var(--g)/2) 0%, 
    0% 0%,0% 100%,100% 100%,
    100% calc(33.745% + var(--g)/2),
    50% calc(50% + var(--g)/2)); 
  --c:orange;
  border-width:calc(var(--s)/2);  
  top:calc(var(--s)/4);
  left:calc(var(--s)/4);
  right:calc(var(--s)/4);
  bottom:calc(var(--s)/4);
}

body {
 background:#f2f2f2;
}

<div class="palette">
</div>

<div class="palette" style="--s:40px;--g:20px;transform:rotate(45deg)">
</div>

<div class="palette" style="--s:8px;--g:10px;transform:rotate(90deg)">
</div>

并使用不同的clip-path来控制大小

.palette {
  --g:5px; /* The gap between shapes*/
  --s:10px; /* the size*/

  height: 200px;
  width: 200px;
  position:relative;
  display:inline-block;
  overflow:hidden;
}
.palette:before,
.palette:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border:var(--s) solid var(--c,blue);
  border-radius:50%;
  clip-path:polygon(
    calc(50% + var(--g)/2) 50%, 
    calc(50% + var(--g)/2) 0%, 
    100% 0%,100% 50%,
    100% calc(70% - var(--g)/2),
    50% calc(50% - var(--g)/2)); 
}

.palette:after {
 clip-path:polygon(
    calc(50% - var(--g)/2) 50%, 
    calc(50% - var(--g)/2) 0%, 
    0% 0%,0% 100%,100% 100%,
    100% calc(70% + var(--g)/2),
    50% calc(50% + var(--g)/2)); 
  --c:orange;
  border-width:calc(var(--s)/2);  
  top:calc(var(--s)/4);
  left:calc(var(--s)/4);
  right:calc(var(--s)/4);
  bottom:calc(var(--s)/4);
}

body {
 background:#f2f2f2;
}

<div class="palette">
</div>

<div class="palette" style="--s:40px;--g:20px;transform:rotate(45deg)">
</div>

<div class="palette" style="--s:8px;--g:10px;transform:rotate(90deg)">
</div>