css - 使用线性渐变将CSS圆分成3个相等的部分-饼图样式

Question

我正在尝试创建一个进度指示器-在某种程度上，我已经做到了，但这并不是我最终想要的。这是一张图片：



如您所见，指示器显示三分之一，三分之二，然后充满。这是我要实现的目标，只是我希望第一部分，第二部分和第三部分使用不同的颜色，因此我将从12点开始以3种不同颜色的3个相等的切片结束。

这是代码-我删除了中间部分，因为它与问题无关：（CSS采用Less语法）

.timeline {
    h3 {
        position:relative;

        & > .step {
            background-color:@accentColor;
            background-clip:padding-box;
            border:solid 1px @divider;
            border-radius:50%;
            height:52px;
            position:absolute;
            top:0;
            left:0;
            width:52px;

            &.one {
                background-image: linear-gradient(210deg, transparent 50%, white 50%),
                    linear-gradient(90deg, white 50%, transparent 50%);
            }
            &.two {
                background-image: linear-gradient(90deg, transparent 50%, @accentColor 50%),
                    linear-gradient(144deg, white 50%, transparent 50%);
            }
            &.three {}
        }
    }
}

<div class="timeline">
    <h3><span class="step one"></span></h3>
    <h3><span class="step two"></span></h3>
    <h3><span class="step three"></span></h3>
</div>

我并没有真正理解渐变之间的相互作用，尽管进行了几次编辑，但我离任何解决方案都还很近。

使用线性渐变是否有可能？还是需要再次查看？

Answer 1

使用渐变方法不可能获得三个不同颜色的部分。更好的选择是this answer中描述的选择。我添加此答案只是为了解释渐变的实际作用，因为我认为这也是您的问题的一部分。


对于第一步：


.step元素上有两个渐变。将多个图像添加到一个元素时，指定的第一个图像是最顶层，最后一个图像是底层。
渐变的下层将元素分为两半（沿宽度方向）。它是白色的，占50％，另一个是透明的（请参见摘要中的第一个方框）。透明部分应该透彻显示background-color元素的.step（但在这里它不是，因为我没有为background-color元素设置任何.step）。
渐变的上层是一个有角度的渐变（210deg），该渐变对于50％（下部）还是白色，而对于另一个透明。顶部是透明的，将显示其下面各层的颜色。
现在，假设第二个块的输出（在下面的代码片段中）位于第一个块的顶部。倾斜的底部将为白色（由于上层）。上部在顶层是透明的，因此将在一半（宽度方向）上显示下层的白色，并在其余部分显示.step元素的实际背景色。
所以最终的输出就是您在第三块中看到的。底部白色部分是由顶层产生的，红色部分是由梯度的底层产生的，黑色部分实际上是透明的，但是如果您向元素添加背景色，则该颜色会显示出来。

.timeline h3 {
  position: relative;
}
.timeline h3 > .step {
  border: solid 1px yellowgreen;
  border-radius: 50%;
  height: 52px;
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
}
.timeline h3 > .step.part-one {
  background-image: linear-gradient(90deg, white 50%, transparent 50%);
}
.timeline h3 > .step.part-two {
  background-image: linear-gradient(210deg, transparent 50%, white 50%);
}
.timeline h3 > .step.one {
  background-image: linear-gradient(210deg, transparent 50%, white 50%), linear-gradient(90deg, red 50%, transparent 50%);
}
/* just for demo */

div {
  height: 100px;
}
body {
  background: black;
}

<div class="timeline">
  <h3><span class="step part-one"></span></h3>
</div>
<div class="timeline">
  <h3><span class="step part-two"></span></h3>
</div>
<div class="timeline">
  <h3><span class="step one"></span></h3>
</div>

对于第二步：


与第一步类似，这里也有两个渐变，下面的代码片段将它们分解为几层。
顶层一半为白色，另一半与元素的background-color颜色相同（宽度方向）。这提供了50％进度的外观。
下层是一个有角度的渐变，白色为50％，其余部分为透明。它的角度意味着透明部分在底部，白色部分在顶部。
现在再想像一下将第二个块放在第一个块的顶部。它将显示我们为右半部分指定的颜色，另一半为透明将显示下层的背景颜色。下层对于底部也是透明的，因此它将通过该区域中元素的背景色显示，其余部分将为白色（我将其设为红色以显示背景的哪一部分是由下层产生的） 。

.timeline h3 {
  position: relative;
}
.timeline h3 > .step {
  border: solid 1px yellowgreen;
  border-radius: 50%;
  height: 52px;
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
}
.timeline h3 > .step.part-one {
  background-image: linear-gradient(144deg, white 50%, transparent 50%);
}
.timeline h3 > .step.part-two {
  background-image: linear-gradient(90deg, transparent 50%, yellowgreen 50%);
}
.timeline h3 > .step.two {
  background-image: linear-gradient(90deg, transparent 50%, yellowgreen 50%), linear-gradient(144deg, red 50%, transparent 50%);
}
/* just for demo */

div {
  height: 100px;
}
body {
  background: black;
}

<div class="timeline">
  <h3><span class="step part-one"></span></h3>
</div>
<div class="timeline">
  <h3><span class="step part-two"></span></h3>
</div>
<div class="timeline">
  <h3><span class="step two"></span></h3>
</div>

对于第三步：


实际上，您实际上根本不需要渐变。您只需要一个完整的纯色即可。

.timeline h3 {
  position: relative;
}
.timeline h3 > .step {
  background: yellowgreen;
  border: solid 1px yellowgreen;
  border-radius: 50%;
  height: 52px;
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
}
/* just for demo */

div {
  height: 100px;
}
body {
  background: black;
}

<div class="timeline">
  <h3><span class="step three"></span></h3>
</div>

或者，您也可以使用两个渐变来模拟实体填充，如下所示。

.timeline h3 {
  position: relative;
}
.timeline h3 > .step {
  background: yellowgreen;
  border: solid 1px yellowgreen;
  border-radius: 50%;
  height: 52px;
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
}
.timeline h3 > .step.three {
  background-image: linear-gradient(90deg, transparent 50%, yellowgreen 50%), linear-gradient(90deg, yellowgreen 50%, transparent 50%);
}

/* just for demo */

div {
  height: 100px;
}
body {
  background: black;
}

<div class="timeline">
  <h3><span class="step three"></span></h3>
</div>

完整的解决方案：

现在到最后一点，您需要在顶部放置一个带有不同颜色的小圆圈，以使填充看起来像只是要填充的边框。

.timeline h3 {
  position: relative;
}
.timeline h3 > .step {
  background: yellowgreen;
  border: solid 1px yellowgreen;
  border-radius: 50%;
  height: 52px;
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
}
.timeline h3 > .step.one {
  background-image: linear-gradient(210deg, transparent 50%, #ffffff 50%), linear-gradient(90deg, #ffffff 50%, transparent 50%);
}
.timeline h3 > .step.two {
  background-image: linear-gradient(90deg, transparent 50%, yellowgreen 50%), linear-gradient(144deg, #ffffff 50%, transparent 50%);
}
.timeline h3 > .step.three {
  background-image: linear-gradient(90deg, transparent 50%, yellowgreen 50%), linear-gradient(90deg, yellowgreen 50%, transparent 50%);
}
.timeline h3 > .step:after {
  position: absolute;
  content: '';
  height: calc(100% - 10px);
  width: calc(100% - 10px);
  top: 0px;
  left: 0px;
  padding: 5px;
  border-radius: inherit;
  background-color: blue;
  background-clip: content-box;
  /* meaning the background will be transparent in the padding area */
}
/* just for demo */

div {
  height: 100px;
}
body {
  background: black;
}

<div class="timeline">
  <h3><span class="step one"></span></h3>
</div>
<div class="timeline">
  <h3><span class="step two"></span></h3>
</div>
<div class="timeline">
  <h3><span class="step three"></span></h3>
</div>