How to make not fully rounded circle? - html

Question

I want to do rounded circle like below image
But I am in trouble in making inner rounded one ! I tried with border-top-style & border-right-style but not getting the same yet .
.circle {
border-radius:50%;
width:100px;
height:100px;
background:#A2D36E;
text-align:center; }
.bar {
top:15px;
left:15px;
border-radius:50%;
border:1px solid white;
border-width:3px;
border-top-style:none;
border-right-style:none;
width:80px;
height:80px;
position:absolute;
}
span {
top:30%;
transform:translateY(-30%);
position:relative;
font-size:1.6rem;
color:#fff;
font-weight:bold;
}
<div class='circle'>
<div class='bar'> </div>
<span>8.8</span>
</div>

Answer 1

.circle {
border-radius:50%;
width:100px;
height:100px;
background:#A2D36E;
text-align:center; }
.bar {
top:15px;
left:15px;
border-radius:50%;
border:1px solid white;
border-width:3px;
border-top-style:inset;
border-right-style:inset;
border-top-color: transparent;
width:80px;
height:80px;
position:absolute;
transform: rotate(40deg);
}
span {
top:30%;
transform:translateY(-30%);
position:relative;
font-size:1.6rem;
color:#fff;
font-weight:bold;
}
<div class='circle'>
<div class='bar'> </div>
<span>8.8</span>
</div>

Answer 2

Try This:
.circle {
border-radius:50%;
width:100px;
height:100px;
background:#A2D36E;
text-align:center;
}
.bar {
top:15px;
left:15px;
border-radius:50%;
border:1px solid white;
border-width:3px;
width:80px;
height:80px;
position:absolute;
}
.bar:after {
width: 25px;
height: 10px;
content: '';
position: absolute;
top: -3px;
background: #A2D36E;
transform: rotate(20deg);
}
span {
top:30%;
transform:translateY(-30%);
position:relative;
font-size:1.6rem;
color:#fff;
font-weight:bold;
}
<div class='circle'>
<div class='bar'> </div>
<span>8.8</span>
</div>

Answer 3

The CodePen link demonstrates an SVG solution: https://codepen.io/UncaughtTypeError/pen/WXRObq
The Code Snippet below demonstrates x2 solutions you could explore:
Border Shape solution
Clip Path solution
.circle {
border-radius: 50%;
width: 100px;
height: 100px;
background: #A2D36E;
text-align: center;
position: relative;
}
.bar {
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 50%;
border: 1px solid white;
border-width: 3px;
margin: auto;
width: 80px;
height: 80px;
position: absolute;
}
span {
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 35px;
position: absolute;
font-size: 1.6rem;
color: #fff;
font-weight: bold;
}
/* Additional */
.clip-path-solution .bar:after {
content: "";
width: 90px;
height: 90px;
position: absolute;
bottom: 0;
top: -3px;
left: -3px;
right: 0;
background: #a2d36e;
border-radius: 100%;
-webkit-clip-path: polygon(48% 48%, 100% 0%, 100% 0%, 50% 0%);
clip-path: polygon(48% 48%, 100% 0%, 100% 0%, 50% 0%);
transform: rotate(10deg);
}
.border-solution .shape {
transform: rotate(-30deg);
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid transparent;
position: absolute;
box-sizing: border-box;
/* starting point */
/*border-right: 10px solid #d36e6e;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 90px;
height: 90px;
border-radius: 100%;*/
/* adjusted accordingly for demonstration */
margin: 0;
width: 50px;
height: 50px;
top: 10px;
margin: 0;
right: 10px;
left: auto;
border-top-right-radius: 45px;
border-bottom-right-radius: 30px;
border-right: 10px solid #a2d36e;
}
<h3>Clip Path</h3>
<div class='clip-path-solution circle'>
<div class='bar'></div>
<span>8.8</span>
</div>
<h3>Border Shape</h3>
<div class='border-solution circle'>
<div class='bar'></div>
<div class='shape'></div>
<span>8.8</span>
</div>