CSS circle with inlay border
First off, I've changed dimensions to pixels as it was easier to work with just one unit, but you can of course change this back. So I made the green border 10px thick.
You need 3 circle sections to achieve this. One for the gray circle, one for the green quarter and one to achieve the gap between the two visible parts. The gap may be achievable using other methods that I can't think of right away.
First, I moved the green border to the ::after pseudo-selector, so I could put something underneath it to create the gap (the ::before pseudo-selector)
Secondly, to avoid the growing/shrinking effect your green border has, you need to give the whole green circle the same size (at least the parts that are next to the border-right, i.e. border-top and border-bottom). This can be done by adding a 10px transparent border:
border: solid transparent 10px;
To compensate for the whole box with the green border growing as a result of this, I added negative margins on the left/top.
For the gap, a second circle is created. This one has a white border. This means it won't work against any other background (but you can change the color of this border to match the background). It's a bit bigger and moved further left/top so that it's positioned appropriately.
.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>this is a css method but better to do it as 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>Try this :)
.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>