html - Css 轮询结果四舍五入

Question

我正在制作一个网站，但我在处理投票结果时遇到了一些问题。我在谷歌上搜索过，但我仍然没有找到任何可以帮助我的东西。我已经尝试过 css，但它完全不起作用。我只是得到一个白色 block 。我试图让投票结果看起来像这样:

可是我做不到。我该怎么做。

这是我当前的代码:

.Yellow {
  background-color: rgb( 255, 255, 255 );
  position: absolute;
  left: 132px;
  top: 836px;
  width: 164px;
  height: 165px;
  z-index: 260;
}
.Green {
  background-color: rgb( 182, 183, 182 );
  position: absolute;
  left: 132px;
  top: 836px;
  width: 164px;
  height: 165px;
  z-index: 259;
}
.Red {
  background-color: rgb( 81, 108, 120 );
  position: absolute;
  left: 132px;
  top: 836px;
  width: 164px;
  height: 165px;
  z-index: 258;
}
.Cyan {
  background-color: rgb( 220, 177, 61 );
  position: absolute;
  left: 132px;
  top: 836px;
  width: 164px;
  height: 165px;
  z-index: 257;
}

HTML:

<div class="Yellow"></div>
                <div class="Green"></div>
                <div class="Cyan"></div>
                <div class="Red"></div>`

Answer 1

使用 css 很难获得类似的东西，我建议在 Canvas 中使用 javascript 绘制它。

你会有这样的东西:

var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.strokeWidth = 10;

ctx.beginPath();
ctx.strokeColor = color1;
ctx.arc(x,y, 0, angle1);
ctx.stroke()

ctx.beginPath();
ctx.strokeColor = color2;
ctx.arc(x,y, angle1, angle2);
ctx.stroke()

...

其中 x、y 是圆心，color1、color1 等是每种颜色的字符串，percent1、percent2 等是开始和结束每个线段的 Angular 。

您也可以使用 html5 的 svg 支持来做到这一点，但我对此不太熟悉，而且我认为浏览器对它的支持也不尽如人意(尽管可能是错误的)。