CSS 带镶嵌边框的圆圈
CSS circle with inlay border
我正在尝试根据以下示例在 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>
如果您能帮助镶嵌物平方并增加镶嵌物和主圆之间的间距,我们将不胜感激。
首先,我已将尺寸更改为像素,因为只使用一个单位更容易,但您当然可以将其改回。所以我把绿色边框加厚了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>
这是一个 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>
试试这个:)
.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>
基于 我会考虑使用 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 中创建一个带有镶嵌边框的圆圈:
我有以下 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>
如果您能帮助镶嵌物平方并增加镶嵌物和主圆之间的间距,我们将不胜感激。
首先,我已将尺寸更改为像素,因为只使用一个单位更容易,但您当然可以将其改回。所以我把绿色边框加厚了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>
这是一个 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>
试试这个:)
.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>
基于
我正在使用 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>