How to Add Spacing Between Slices in a CSS-Only Pie Chart?

Add Spacing to CSS Only Pie Chart Slices: A Practical Solution

Pie charts rendered using CSS-only techniques provide an elegant solution for visualizing data. However, the absence of spacing between slices can diminish the chart's effectiveness. To address this issue and create a pie chart that resembles the provided image, follow these steps:

Step 1: Remove Unnecessary Clip-Path

The original code utilizes clip-path extensively, which introduces unnecessary complexity. Instead, create a simplified structure that revolves around absolute positioning and border-radius.

Step 2: Create a Container Div

Establish a container div that positions all slices centrally while concealing any overflowing areas using overflow: hidden.

Step 3: Absolute Positioned Slices

Within the container, position each slice absolutely and extend it to occupy the entire space available. Utilizing border-radius, ensure the slices appear circular.

Step 4: Define Border Width and Color

For each slice, define the border width and color using the border property. Utilize custom CSS variables (e.g., --c) to simplify the modification of border colors.

Step 5: Rotate Slices

Apply transform: rotate() to each slice to align them correctly along the circumference.

Example Code

Implement the following code to create a CSS-only pie chart with spacing between slices:

.palette {
  height: 200px;
  width: 200px;
  position: relative;
  overflow: hidden;
}

.palette > * {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 50px solid var(--c, red);
  border-radius: 50%;
  clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 33.745%);
}

.color1 {
  transform: rotate(72deg);
  --c: blue;
}

.color2 {
  transform: rotate(144deg);
  --c: orange;
}

.color3 {
  transform: rotate(-72deg);
  --c: green;
}

.color4 {
  transform: rotate(-144deg);
  --c: purple;
}

<div class="palette">
  <div class="color1"></div>
  <div class="color2"></div>
  <div class="color3"></div>
  <div class="color4"></div>
</div>

With this code, you can now create a visually appealing CSS-only pie chart with clear spacing between slices.

The above is the detailed content of How to Add Spacing Between Slices in a CSS-Only Pie Chart?. For more information, please follow other related articles on the PHP Chinese website!