원형을 완전히 둥글게 만드는 방법은 무엇입니까?

Question

나는 이미지

아래처럼 둥근 원을하고 싶어하지만 내부 둥근 하나를 만드는 문제이다! border-top-style & border-right-style으로 시도했지만 아직 동일하게 보이지 않습니다.

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

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

CodePen 링크는 SVG 솔루션을 보여줍니다 https://codepen.io/UncaughtTypeError/pen/WXRObq

코드 '아래 X2 솔루션을 당신으로 탐색 할 수 보여줍니다

1. 테두리 모양 솔루션
2. 클립 경로 해결책

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