CSS 圆形圆环图透明背景

Question

您好，我正在尝试在中心制作一个 'donut chart'，如下所示：

这是使用以下代码显示的：

:root {
  --size: 90px;
  --bord: 20px;
}

.chart {
  width: var(--size);
  height: var(--size);
  margin: 1em auto;
  border-radius: 50%;
  background-image: conic-gradient(lightseagreen var(--value), lightgrey var(--value));
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - var(--bord));
  height: calc(100% - var(--bord));
  background: white;
  border-radius: inherit;
}

.x-60 {
  --value: 60%;
}

.x-20 {
  --value: 20%;
}

<div class="chart x-60">

</div>

我想将背景从 'white' 设置为透明，以便在显示背景中的木头图像的同时仍保留 'border'。

如何实现这一点，因为将背景更改为 none 只会使 'circle' 成为饼图：

谢谢。

Answer 1

使用带有径向渐变的蒙版创建一个洞

:root {
  --size: 80px;
  --bord: 10px;
}

.chart {
  width: var(--size);
  height: var(--size);
  margin: 1em auto;
  border-radius: 50%;
  background: conic-gradient(lightseagreen var(--value), lightgrey var(--value));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--bord)),#fff calc(100% - var(--bord) + 1px));
          mask:radial-gradient(farthest-side,transparent calc(100% - var(--bord)),#fff calc(100% - var(--bord) + 1px));
}

.x-60 {
  --value: 60%;
}

.x-20 {
  --value: 20%;
}

body {
  background:linear-gradient(to right,yellow,blue);
}

<div class="chart x-60">

</div>

CSS 圆形圆环图透明背景

CSS Circle Donut Chart Transparent Background

html

css

geometry

background