如何使用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;
}Run Code Online (Sandbox Code Playgroud)
<div class="arrow"></div>Run Code Online (Sandbox Code Playgroud)