如何在CSS中绘制循环箭头？

Question

如何使用CSS在下方图像上绘制循环箭头和文本在中心？

我试过创建一个曲线箭头,但我不知道如何让它看起来像我想要的.

.arrow {
  width: 200px;
  height: 200px;
  border: 6px solid;
  border-radius: 50%;
  position: relative;
}
.arrow:before {
  content: "";
  display: block;
  width: 10px;
  height: 50px;
  background: #fff;
  position: absolute;
  bottom: 0;
  top: 0;
  right: -6px;
  margin: auto;
}
.arrow:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #000;
  position: absolute;
  bottom: 106px;
  right: -20px;
}

<div class="arrow"></div>

Answer 1

这是一个疯狂的想法:

.arrow {
  width:250px;
  height:200px;
  font-weight:bold;
  font-size:1.2em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(93% 98%   at bottom left,#fff    80%,transparent 81%) 100% -23px,  
    radial-gradient(117% 102% at bottom left,#5dac58 80%,transparent 81%) 100% -23px,
    
    radial-gradient(93% 98%   at top left,#fff    80%,transparent 81%) 100% calc(100% + 23px),  
    radial-gradient(117% 102% at top left,#51884b 80%,transparent 81%) 100% calc(100% + 23px),
  
  
    radial-gradient(93% 98%   at bottom right,#fff    80%,transparent 81%) 0 -23px,  
    radial-gradient(117% 102% at bottom right,#51884b 80%,transparent 81%) 0 -23px,
  
    radial-gradient(93% 98%   at top right,#fff    80%,transparent 81%) 0 calc(100% + 23px),  
    radial-gradient(117% 102% at top right,#5dac58 80%,transparent 81%) 0 calc(100% + 23px);
    
    background-size:50% 60%;
    background-repeat:no-repeat;
    position:relative;
}
.arrow:before,
.arrow:after{
    content: "";
    position: absolute;
    z-index: 2;
    top: calc(50% - 12px);
    border-right: 25px solid #fff;
    border-left: 25px solid #fff;
}
.arrow:before {
    left: -2px;
    border-bottom: 25px solid #5dac58;
}
.arrow:after {
    right: -2px;
    border-top: 25px solid #5dac58;
}

<div class="arrow">
 92.28%
</div>