css - 如何创建具有三个相等切片的 css 饼图？

Question

我对 css 比较陌生，想知道创建具有三个相等切片的饼图的最简单方法是什么。我一直在尝试使用 this codepen ，但我真的不明白他们是如何使用渐变的，也无法根据我的需要进行调整。任何帮助表示赞赏!

.rainbow-wheel {
  position: relative;
  margin: 1em auto;
  border: solid 2em white;
  width: 16em; height: 16em;
  border-radius: 50%;
  background: 
    linear-gradient(36deg, #272b66 42.34%, transparent 42.34%) 0 0,
    linear-gradient(72deg, #2d559f 75.48%, transparent 75.48%) 0 0,
    linear-gradient(-36deg, #9ac147 42.34%, transparent 42.34%) 100% 0,
    linear-gradient(-72deg, #639b47 75.48%, transparent 75.48%) 100% 0, 
    linear-gradient(36deg, transparent 57.66%, #e1e23b 57.66%) 100% 100%,
    linear-gradient(72deg, transparent 24.52%, #f7941e 24.52%) 100% 100%,
    linear-gradient(-36deg, transparent 57.66%, #662a6c 57.66%) 0 100%,
    linear-gradient(-72deg, transparent 24.52%, #9a1d34 24.52%) 0 100%, 
    #43a1cd linear-gradient(#ba3e2e, #ba3e2e) 50% 100%;
  background-repeat: no-repeat;
  background-size: 50% 50%;
  transition: 1s;
}

Answer 1

您可以根据示例删除一些不需要的渐变，然后更新 Angular 和开始/停止值，最后也更新背景颜色:

body { background: gainsboro; } 
.rainbow-wheel {
  position: relative;
  margin: 1em auto;
  border: solid 2em white;
  width: 16em; height: 16em;
  border-radius: 50%;
  background: 
    linear-gradient(60deg, #272b66 63.34%, transparent 63.34%) 0 0,
    linear-gradient(72deg, transparent 24.52%, #e1e23b 24.52%) 100% 100%,
    linear-gradient(-36deg, transparent 57.66%, #272b66 57.66%) 0 100%,
    linear-gradient(-60deg, transparent 36.52%, #272b66 36.52%) 0 100%, 
    #9ac147 linear-gradient(#e1e23b,#e1e23b) 50% 100%;
  background-repeat: no-repeat;
  background-size: 50% 50%;
  transition: 1s;
}
/* hover ,click -> to check center is at center */
.rainbow-wheel:hover {transform:rotate(120deg);}
.rainbow-wheel:focus {transform:rotate(240deg);}

<div class='rainbow-wheel' tabindex="0"></div>

当你不理解一些CSS代码时，你可以去掉规则/值(或者这里的一部分用于渐变)看看是什么效果。