如何使用css和javascript创建由圆弧段组成的圆？

<div id="circle"></div>

#circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #f0f0f0;
  position: relative;
  overflow: hidden;
}

var circle = document.getElementById("circle");
var angle = 45; // 圆弧段的角度，可根据需求调整

var arc = document.createElement("div");
arc.className = "arc";
arc.style.transform = "rotate(" + angle + "deg)";

circle.appendChild(arc);

.arc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ff0000; /* 设置圆弧段的颜色 */
  clip-path: polygon(50% 0, 100% 0, 100% 100%); /* 设置圆弧段的形状 */
}