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 伪选择器）

其次，为了避免绿色边框的 growing/shrinking 效果，您需要为整个绿色圆圈设置相同的大小（至少 border-right 旁边的部分，即 border-top 和 border-bottom）。这可以通过添加 10px 透明边框来完成：

border: solid transparent 10px;

为了补偿绿色边框因此变大的整个框，我在 left/top 上添加了负边距。

针对间隙，创建了第二个圆圈。这个有白色边框。这意味着它不适用于任何其他背景（但您可以更改此边框的颜色以匹配背景）。它有点大，并且移动得更远 left/top 以便它的位置合适。

.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

基于我会考虑使用 clip-path 的相同技巧。这个想法是使用两个相反的剪辑路径到 show/hide 不同的部分，同时考虑一些差距。

我正在使用 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>

CSS 带镶嵌边框的圆圈

CSS circle with inlay border

css

css-shapes