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

您可以从示例中进行操作，并删除一些不需要的渐变，然后更新角度和起始/终止值，最后也更新背景色：

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代码时，可以删除规则/值（或此处的一部分用于渐变）以找出效果。

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

1 个答案: