如何制作不完全圆润的圆圈？

Question

我想像图片下方那样做圆形

但是我在制作内圆角方面遇到了麻烦！我尝试使用border-top-style & border-right-style但尚未获得相同的内容。

＆＃13;

＆＃13;

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

＆＃13;

<div class='circle'> 
  <div class='bar'> </div>
  <span>8.8</span> 
</div>

＆＃13;

＆＃13;

＆＃13;

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

试试这个：

.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

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>