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

根据我之前的回答，我会考虑与clip-path相同的技巧。 这个想法是使用两个相反的剪辑路径来显示/隐藏不同的部分，同时考虑一些差距。

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