纯css实现圆环渐变

css代码

#aa {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: conic-gradient(rgba(255, 0, 0, 1) 0deg,rgba(255, 0, 0, 0) 30deg, rgba(255, 255, 0, 1) 30deg,rgba(255, 255, 0, 0) 180deg,rgba(255, 0, 255, 1) 180deg,rgba(255, 0, 255, 0) 360deg);
    mask: radial-gradient(transparent 110px, #000 110px);
}

html代码

<div id="aa"></div>

conic-gradient文档

conic-gradient() - CSS：层叠样式表 | MDN (mozilla.org)

实现效果