如何在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>

Answer 2

svg回收符号

css不能绘制复杂的形状。 SVG更适合该任务

<svg viewBox="-10 0 120 100" xmlns="http://www.w3.org/2000/svg">
  <g>
      <path id="half" d="
      M 3, 53 
      15, 53 
      C 18, 7 81, 6 91, 43 
      l 6, 0 -10, 9 -13, -9 5, -0 
      C 73,9 6,4 3,53 Z
      " fill="#60aa5c"/>
     <use href="#half" transform="
     rotate(180) 
     translate(-95, -115)" y="10"/>
     <text x="40" Y="55" font-size="10">42%</text>
  </g>
</svg>

Answer 3

您可以使用box-shadow来达到这种效果

*{box-sizing: boder-box}
body:hover{background-color: black; color:white} 
figure {
    position: relative;
    padding: 0;
    width: 360px;
    height: 214px;
    margin: 80px auto; 
    overflow: hidden;
}

figure figcaption{
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  font-size: 32px;
  font-weight: 900;
  height: 32px;
  line-height: 32px;
  text-align: center;
  margin: -16px 0 0 0;
}

figure:before, figure:after{
	content:"";
	position: absolute; 
  width: 0px;
  height: 0px;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent
}
figure:before {
    right: 0;
    top: 58px;
    border-top: 60px solid #5eab59;
}
figure:after{ 
  left: 0;
  top: 100px;
  border-bottom: 60px solid #5eab59; 
}
figure .container-up,
figure .container-down{
  position: absolute;
  width: 100%;
  height: 125px;
}
figure .container-up{
  top: 0;
  transform: translate3d(20px,0px,0px);
}

figure .container-down {
    top: 94px;
    transform: scale3d(-1,-1,-1) translate3d(20px,2px,0);
}
figure .arrow-body{
  position: relative;
  width: 100%;
  height: 100%;
}
figure .arrow-body:before, figure .arrow-body:after{
  content: "";
  position: absolute
}
figure .arrow-body:before {
    width: 100%;
    margin-top: -26px;
    height: 100%; 
    border-radius: 100% 0 0 0;
    box-shadow: green 60px 2px 0px -4px inset;
} 
figure .container-down .arrow-body:before { 
    z-index: 1; 
} 
figure .arrow-body:after {
    width: 90%;
    margin-top: -2px;
    right: 0;
    height: 60%;
    border-radius: 0 100% 0 0;
    box-shadow: inset -84px 0px 0px -10px #5eab59;
    transform: rotateZ(0deg) translate3d(-46px, -15px, 0px);
}

<figure>
  <div class=container-up>
      <div class=arrow-body></div> 
  </div> 
	<figcaption>98.28%</figcaption>
  <div class=container-down>
      <div class=arrow-body></div> 
  </div>
</figure>