css - 有没有办法将填充或 boxshadow 添加到 css 圆锥渐变部分

Question

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

目前我有

有没有我可以为每个圆锥渐变段添加一点填充或框阴影？

代码

HTML

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