Wie füge ich in einem Nur-CSS-Kreisdiagramm Abstände zwischen Slices hinzu?

Abstände zu Nur-CSS-Kreisdiagrammsegmenten hinzufügen: Eine praktische Lösung

Mit Nur-CSS-Techniken gerenderte Kreisdiagramme bieten eine elegante Lösung zur Visualisierung von Daten. Allerdings kann das Fehlen von Abständen zwischen den Slices die Effektivität des Diagramms beeinträchtigen. Um dieses Problem zu beheben und ein Kreisdiagramm zu erstellen, das dem bereitgestellten Bild ähnelt, führen Sie die folgenden Schritte aus:

Schritt 1: Unnötigen Clip-Pfad entfernen

Der ursprüngliche Code nutzt Clip-Pfad umfassend, was einführt unnötige Komplexität. Erstellen Sie stattdessen eine vereinfachte Struktur, die sich um absolute Positionierung und Randradius dreht.

Schritt 2: Erstellen Sie ein Container-Div

Erstellen Sie ein Container-Div, das alle Slices zentral positioniert und gleichzeitig alle überlaufenden Bereiche verdeckt Überlauf: ausgeblendet.

Schritt 3: Absolut positionierte Slices

Innerhalb des Containers, Positionieren Sie jede Scheibe absolut und erweitern Sie sie, um den gesamten verfügbaren Platz einzunehmen. Stellen Sie mithilfe des Randradius sicher, dass die Slices kreisförmig erscheinen.

Schritt 4: Randbreite und -farbe definieren

Definieren Sie für jedes Slice die Randbreite und -farbe mithilfe der Eigenschaft „border“. Verwenden Sie benutzerdefinierte CSS-Variablen (z. B. --c), um die Änderung der Rahmenfarben zu vereinfachen.

Schritt 5: Slices drehen

Wenden Sie transform:Rotate() auf jedes Slice an, um es entlang der korrekten Ausrichtung auszurichten der Umfang.

Beispielcode

Implementieren Sie den folgenden Code, um ein reines CSS-Kreisdiagramm mit Abständen dazwischen zu erstellen 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>

Mit diesem Code können Sie jetzt ein optisch ansprechendes reines CSS-Kreisdiagramm mit klarem Abstand zwischen den Slices erstellen.

Das obige ist der detaillierte Inhalt vonWie füge ich in einem Nur-CSS-Kreisdiagramm Abstände zwischen Slices hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!