带镶嵌边框的CSS圆

时间：2019-08-14 07:39:41

标签： css css-shapes

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

inlay circle

我具有以下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>

对于使镶嵌物平方化并增加镶嵌物和主圆之间的间距的任何帮助，将不胜感激。

4 个答案:

答案 0 :(得分：5)

首先，我将尺寸更改为像素，因为使用一个单位更容易，但是您当然可以将其改回来。因此，我将绿色边框的宽度设置为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>

答案 1 :(得分：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>

答案 2 :(得分：2)

尝试一下：） 

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

答案 3 :(得分：1)

基于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>

enter image description here

您可以旋转以控制镶嵌边框的开始位置

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

enter image description here

并使用其他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>

enter image description here

相关问题
最新问题