hollow circle with percentage color division

Question

I am working on generating a hollow graph circle. Each division should span a percentage.

Problem Statement: if you see output, those 3 colors which forms a circle should be occupying percent of a circle. For ex if color 1 =33%, color 2=33% and color3= 33% then circle should proportion itself in three equal colors. Right now circle is not according to the percent division of colors. Any help would be highly appreciated.

EDIT: Can this be achieved using html canvas?

.a{
    margin: 0;
    width: 90px;
    text-align: center;
    height: 90px;
    border-radius: 50%;
    border: 4px solid transparent;
    background-size: 100% 100%, 50% 50%, 50% 50%;
    background-repeat: no-repeat;
    background-image: linear-gradient(white, white), 
                    linear-gradient(30deg, rgb(240,120,16) 100%, lightgrey 0%),
                    linear-gradient(120deg, rgb(127,127,127) 100%, lightgrey 0%),
                    linear-gradient(310deg, rgb(255,192,0) 100%, lightgrey 0%);
    
    background-position: center center, left top, right top, left bottom, right bottom;
    background-origin: content-box, border-box, border-box, border-box, border-box;
    background-clip: content-box, border-box, border-box, border-box, border-box; 
}

<div class="a"></div>

Answer 1

You may adjust the code like this:

.a{
    margin: 0;
    width: 90px;
    text-align: center;
    height: 90px;
    border-radius: 50%;
    background-size:50% 100% ,100% 50%,100% 100%;
    background-position:100% 0,0 100%,0 0;
    background-repeat: no-repeat;
    background-image:
    linear-gradient(33deg,transparent 37%, green 0),     
    linear-gradient(-33deg, red 70%, blue 0%),     
    linear-gradient(to right, blue 50%, green 50%);
    position:relative;
}
.a:before {
  content:"";
  position:absolute;
  top:5px;
  right:5px;
  left:5px;
  bottom:5px;
  background:#fff;
  border-radius:50%;
}

<div class="a"></div>

By the way it's more suitable to consider SVG or more accurate tools to create chart like this. Here is an idea with SVG:

.pie {
  width: 100px;
}

.pie circle {
  fill: none;
  stroke-width: 4;
  stroke-dasharray:55 110
}

<svg viewBox="0 0 64 64" class="pie">
  <circle r="40%" cx="50%" cy="50%"  stroke="red">
  </circle>
  <circle r="40%" cx="50%" cy="50%"  stroke=" green" stroke-dashoffset=" -55">
  </circle>
  <circle r="40%" cx="50%" cy="50%" stroke="blue" stroke-dashoffset="-110">
  </circle>
 
</svg>