如何用CSS绘制环形扇形图案？

CSS绘制环形扇形图案

本文介绍如何使用CSS高效绘制环形扇形图案，如同示例图片所示。

以下CSS代码示例简洁易懂：

.sector {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* 设置为圆形 */
  background-image: conic-gradient(from 45deg, #f00 45deg, #00f 0); /* 使用conic-gradient创建扇形渐变 */
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* 使用clip-path裁剪成扇形 */
}

代码解读：

• .sector 类定义了扇形元素的样式。
• width 和 height 设置扇形的尺寸。
• border-radius: 50%; 将元素形状设置为圆形，作为扇形的基底。
• background-image: conic-gradient(...) 使用conic-gradient函数创建圆形渐变，from 45deg指定渐变起始角度，#f00 45deg表示红色占据45度角，#00f 0表示蓝色占据剩余角度。
• clip-path: polygon(...) 使用polygon函数裁剪元素，只保留扇形区域。

通过以上代码，您可以轻松创建类似图片所示的环形扇形图案。 您可以调整width、height、颜色值和conic-gradient的角度参数来定制扇形的样式。