html做圆圈提示符,HTML – 如何创建用css剪掉一块的圆圈

使用提供的链接RJo和我在其中一个答案中演示的演示：

.arc-wrapper {

position:relative;

margin:20px;

}

.arc {

position:absolute;

top:0;

left:0;

width: 100px;

height: 100px;

border-radius:100%;

border:1px solid;

border: 10px solid;

border-color: #82ba00;

}

.arc_start {

border-color:#82ba00 transparent;

-webkit-transform: rotate(-65deg);

-moz-transform: rotate(-65deg);

-ms-transform: rotate(-65deg);

-o-transform: rotate(-65deg);

transform: rotate(-65deg);

}

.arc_end {

border-color: transparent #82ba00 #82ba00 #82ba00;

-webkit-transform: rotate(-110deg);

-moz-transform: rotate(-110deg);

-ms-transform: rotate(-110deg);

-o-transform: rotate(-110deg);

transform: rotate(-110deg);

}

您可以通过更改旋转(度)值来更改间隙的大小和方向.