如何用div繪制一個容器，例如圓形

需求：一個圓形的容器，里面有兩種顏色，隨比率不同而變化。

實現同一個容器中兩種顏色變化的關鍵是css漸變

//background:linear-gradient(#818181 30%,#06FF30 30%);   

<td>
<div class="process${st.count}" style=" margin:0 auto; width :80px;height: 60px;" >

<script type="text/javascript">
//根據進度改變顏色
//參數 bilv 顏色比率 百分比
function changeColor(bilv,min){
var process = $(".process${st.count}");
var oilhigh = ${oilLevel};

var color = null;
if(oilhigh<=min){
color="FF2652";
}else{
color="06FF30";
}
bilv = (1-bilv)*100;
//background:linear-gradient(#818181 30%,#06FF30 30%); css漸變
var linear = "linear-gradient(#818181 "+bilv+"%,#"+color+" "+bilv+"%)";
var br = "50px";

//設置css樣式

process.css("background",linear);
process.css("border-radius",br);//div變圓形

}
var t = document.getElementById("otable");
var r1 = t.rows.length;
//wv: 水體積 ov:油體積
//var wv = t.rows[r1-1].cells[6].innerHTML;
//var ov = t.rows[r1-1].cells[7].innerHTML;
var wv = ${waterVolume};
var ov = ${oilVolume};
wv = parseFloat(wv);
ov = parseFloat(ov);
var bilv = ov/(wv+ov);
//alert(${minOilHigh});
var min = ${minOilHigh};
//var max = ${maxOilHigh};

changeColor(bilv,min);
</script>
</div>



</td>