使用线性渐变将CSS圆分成3个相等的部分-饼图样式 [英] Split CSS circle into 3 equal parts with linear gradients - pie chart style

问题描述

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

I'm trying to create a progress indicator - and to a certain extent I've done it, but it's not what I want to end up with. Here's an image:

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

As you can see the indicator shows 1 third, 2 thirds, then full. This is what I want to achieve except that I want the first, second and third sections to be different colors, so I would end up with 3 equal slices in 3 different colors starting at 12 o'clock.

这是代码-我删除了中间部分，因为它与以下问题无关:( CSS的语法为Less )

Here's the code - I've removed the centre section because it's not relevant to the question: (the CSS is in Less syntax)

.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>

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

I'm not really undersanding the interaction between the gradients, and despite several edits I'm no nearer to any kind of solution.

使用线性渐变是否可行?还是需要再次查看?

Is this possible using linear gradients or do I need to look again?

推荐答案

使用渐变方法不可能获得三个不同的彩色部分.更好的选择是此答案中所述的选择.我添加此答案只是为了解释 渐变实际上是如何工作的 ，因为我相信这也是您的问题的一部分.

It isn't possible to get three different colored parts using the gradient approach. A much better option would be the one described in this answer. I am adding this answer only to explain how the gradient actually works because I believe that is also a part of your question.

对于第一步:

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

• There are two gradients that are there on your .step element. When multiple images are added to an element, the one specified first is the topmost layer and the last one is the bottom layer.
• The lower layer of the gradient divides the element into two halves (widthwise). It is white for 50% and transparent for the other (see first block in snippet). The transparent portion should show the background-color of the .step element through (but here it does not because I've wantedly not set any background-color to the .step element).
• The upper layer of the gradient is an angled gradient (210deg) which again is white for 50% (the lower part) and transparent for the other. The top part being transparent will show the color of the layers below it.
• Now imagine the output of the second block (in the below snippet) being placed on top of the first one. The angled bottom portion will be white in color (due to the upper layer). The upper portion is transparent in the top layer and so will show the lower layer's white color for half (widthwise) and the actual background color of the .step element for rest.
• So the end output is what you see in the third block. The bottom white part is produced by the top layer, the red portion is produced by the bottom layer of the gradient, the black portion is actually transparent but if you add a background-color to the element then that color will show through.

.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％，其余部分为透明.其角度意味着透明部分在底部，白色部分在顶部.
• 现在再次想象一下将第二个块放在第一个块的顶部.它将显示我们为右半部分指定的颜色，另一半为透明将显示下层的背景颜色.下层对底部也是透明的，因此它将通过该区域中元素的背景色显示，其余部分将为白色(我将其设为红色以显示背景的哪一部分是由下层产生的)

• Similar to the step one, here also there are two gradients and the below snippet has them broken down into layers.
• The top layer is white for one half and has the same color as the element's background-color for the other half (widthwise). This provides the appearance of 50% progress.
• The lower layer is an angled gradient which is white for 50% and transparent for the rest. Its angle means that the transparent portion is at the bottom and the white portion is on the top.
• Now again imagine placing the second block on top of the first block. It will show the color that we have given for the right half, the other half being transparent will show the background color of the lower layer. The lower layer is also transparent for the bottom part and so it will show through the element's background color in that area and the rest will be white (I've made it red to show which portion of the background is produced by the lower layer).

.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>

对于第三步:

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

• You actually don't need a gradient at all here. All you need is only a full solid color.

.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>

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

Or, you can use two gradients also to mimic the solid fill like here.

.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>

完整的解决方案:

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

Now coming to the final bit, you need to place a smaller circle with a different color on top to make the fill look like it is only the border which is getting filled.

.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>

这篇关于使用线性渐变将CSS圆分成3个相等的部分-饼图样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！