是否有方法将填充或框影添加到css圆锥形渐变段中？

Question

我正在尝试用css实现一个自定义饼图。

​

​

目前我有

​

​

有什么我可以添加一些填充或框阴影到每个圆锥曲线梯度段吗？

代码

<div class="pie-chart">
</div>

CSS

.pie-chart {
    background:
        radial-gradient(
            circle closest-side,
            transparent 66%,
            white 0
        ),
        conic-gradient(
                #8C071F 90deg, 
                #F2884B 0 180deg, 
                #F2B705 0 270deg,
        #6CBAD9 0
    );
    position: relative;
    width: 150px;
    min-height: 350px;
    margin: 0;
    outline: px solid #ccc;
}

Answer 1

边界半径、框影和一些转换可以很容易地解决您的问题，而不需要conic-gradient。

​

.pie-chart {
  margin:25px;
  width: 200px;
  height: 200px;
  display: flex;
  flex-wrap: wrap;
}

.pie-chart div {
  width: 50%;
  height: 50%;
}

.pie-chart div:nth-child(1) {
  border-top-left-radius: 200px;
  background: red;
  transform: translate(-5px, -5px);
  box-shadow: -3px -3px 12px 2px grey;
}

.pie-chart div:nth-child(2) {
  border-top-right-radius: 200px;
  background: blue;
  transform: translate(5px, -5px);
  box-shadow: 3px -3px 12px 2px grey;
}

.pie-chart div:nth-child(3) {
  border-bottom-left-radius: 200px;
  background: green;
  transform: translate(-5px, 5px);
  box-shadow: -3px 3px 12px 2px grey;
}

.pie-chart div:nth-child(4) {
  border-bottom-right-radius: 200px;
  background: purple;
  transform: translate(5px, 5px);
  box-shadow: 3px 3px 12px 2px grey;
}

<div class="pie-chart">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

​