BFE.devAI解答 - CSS 问题
15. doughnut chart

To create a doughnut chart with the given specifications and variable percentage, you can use CSS pseudo-elements like ::before and ::after to create the inner and outer arcs. Here is an example code:

.piechart {
  width: 100px;
  height: 100px;
  position: relative;
  border-radius: 50%;
  background-color: #f44336;
  overflow: hidden;
}

.piechart::before,
.piechart::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  top: -5px;
  left: -5px;
  border: 5px solid #ffffff;
  clip: rect(0, 50px, 100px, 0);
}

.piechart::before {
  z-index: 2;
  transform: rotate(var(--percentage) * 3.6deg);
  background-color: #ffffff;
}

.piechart::after {
  background-color: #f44336;
}

Here, we set the width and height of the .piechart container and position it relatively. We also set the border-radius to create a circular shape and the background-color to set the overall color.

For the inner and outer arcs, we use pseudo-elements ::before and ::after with absolute positioning relative to the .piechart. We set the dimensions to be slightly bigger than the container to create a thickness of 10px. We also add a white border to the outer arc to create a circular gap.

In the ::before pseudo-element, we use transform: rotate() to set the angle of the inner arc based on the percentage given by the --percentage variable. We also set the background-color to white to create a contrasting color with the outer arc.

In the ::after pseudo-element, we set the background-color to be the same as the overall color.

This CSS code will create a doughnut chart with the given specifications and variable percentage. The --percentage variable can be set in the style attribute of the .piechart container as shown in the example code.