Html 创建填充渐变的半圆图

我设法创建了带有边框的简单图表。我想将简单的边框颜色更改为渐变色。我试图使用边框图像或背景属性，但似乎不可能将其弯曲以适合容器的拱形有没有办法在css3中实现这种效果？

HTML

<div class="pie">
    <span class="overlay"></span>
</div>

---

您可以在

.pie

（一个

：：在
之后）上添加一个额外的伪元素，将它们定位为在其左上角和右上角重叠，弯曲它们，并使用
背景
作为渐变

然后，将
span
定位在
.pie
的中心，并为其提供具有较高
z索引的白色背景（与透明背景相反），以确保弧的中心保持接触


div{
宽度：200px；
高度：200px；
位置：相对位置；
}
div：：之前{
内容：“；
显示：块；
位置：绝对位置；
排名：0；
背景：线性渐变（向右，天蓝，石板灰）；
宽度：100px；
高度：100px；
左：0；
边框左上半径：100px；
}
div：：之后{
内容：“；
显示：块；
位置：绝对位置；
排名：0；
背景：线性渐变（向右，午夜蓝，钢蓝）；
宽度：100px；
高度：100px；
右：0；
边框右上角半径：100px；
}
分区跨度{
显示：块；
位置：绝对位置；
左：计算（50%-50px）；
顶部：calc（50%-50px）；
背景：白色；
宽度：100px；
高度：100px；
边界半径：50%；
z指数：1；
}
您可以使用两种渐变，内部遮罩和外部遮罩：


.test{
宽度：200px；
高度：100px；
背景图像：线性渐变（白色，白色），线性渐变（向左，红色，绿色）；
背景剪辑：填充框、边框框；
背景来源：填充框、边框框；
边框：实心50px透明；
边界半径：200px 200px 0px 0px；
边框宽度：50px 50px 0px 50px；
}

如果您使用
饼图
的伪值和
覆盖图
作为白色中心，您可以这样做


.pie{
保证金：0自动；
位置：相对位置；
宽度：200px；
高度：100px；
边界半径：200px 200px 0；
溢出：隐藏；
}
.pie：：之后{
变换：旋转（-60度）；/*设置旋转度*/
背景：线性梯度（向右，rgba（228232,7,1）0%，rgba（0218156,1）100%）；
变换原点：中心-底部；
}
.派：以前{
边框：20px纯灰；
}
.馅饼{
顶部：20px；/*匹配边框宽度*/
左：20px；/*匹配边框宽度*/
宽度：计算（100%-40px）；/*匹配边框宽度乘以2*/
高度：计算（200%-40px）；/*匹配边框宽度乘以2*/
边界半径：100%；
背景：白色；
z-index:1；/*将其移动到伪元素的顶部*/
}
.pie*，
.派：以前，
.pie：：之后{
内容：''；
位置：绝对位置；
左：0；
排名：0；
身高：100%；
宽度：100%；
边界半径：继承；
框大小：边框框；
}

这可能会有帮助：还有。你需要内圈是透明的吗？不，只是纯色上的渐变。是的，但它只是一个单一的曲线渐变填充整个半圆。使用“transform:rotate（90deg）；”的目的是给不同的图表赋予不同的值以覆盖主容器。它实际上是两个具有不同渐变的部分。我只是让两个梯度相对，使它们看起来像一个大的。我已经更新了颜色以显示这两个部分。如果这不是你想要的，那么在你的帖子中加入一张你想要的结果的图片可能会更好。它必须更具活力。我需要用不同大小的覆盖渐变填充，比如80%，25%，30%（半个饼），我计算180度=100%。你可以用更复杂的渐变来完成类似的事情，比如
线性渐变（125度，红色，红色30%，蓝色30%，蓝色60%，金色60%金色）
，但是这些碎片的形状不会像你想要的那样是一个很好的楔形。更复杂的标记是必要的。听起来你真正想要的是一个饼图，你可以覆盖下半部分，然后在上面放置一个圆形div，以形成你想要的弧形。另外，如果你能用这些要求来更新你的问题就好了。是的，这正是我想要的。
.pie {
    margin: 0 auto;
    position: relative;
    width: 116px;
    height: 58px;
    overflow: hidden;
}

.pie *,
.pie::before {
    box-sizing: border-box;
}

.pie::before {
    content: '';
    width: inherit;
    height: inherit;
    border: 20px solid grey;
    border-bottom: none;
    border-top-left-radius: 175px;
    border-top-right-radius: 175px;
    position: absolute;
    left:0;
}

.pie .overlay{
    position: absolute;
    top: 100%;
    left: 0;
    width: inherit;
    height: inherit;
    border: 20px solid;
    border-top: none;
    border-bottom-left-radius: 175px;
    border-bottom-right-radius: 175px;
    transform-origin: 50% 0;
    border-color:yellow;/* background: linear-gradient(to right, rgba(228,232,7,1) 0%, rgba(0,218,156,1) 100%); */
    transform: rotate(90deg); 
}