这是解决方案。
工作小提琴
来自此链接的放大镜形状的灵感
编辑:这也是一个可调节的弧线。所以你可以通过在 CSS 中对这一行进行一次更改来增加或减小圆圈的大小
font-size: 15em; /* This controls the size. */
CSS
#pie {
font-size: 15em;
/* This controls the size. */
display: inline-block;
width: 0.5em;
height: 0.5em;
border: 0.05em solid #00cc00;
position: relative;
border-radius: 0.35em;
}
#pie::before {
content:"";
display: inline-block;
position: absolute;
right: 0.33em;
bottom: 0em;
border-width: 0;
background: white;
width: 0.22em;
height: 0.12em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
HTML
<div id="pie"><div>
编辑 2:
这是一个基于 Canvas 的解决方案的小提琴。我个人觉得你应该使用这种方法。
小提琴
从 Tharindulucky 借来的代码