Wie kann ich ein prozentuales Kreisdiagramm nur mit CSS erstellen?

Prozent-Kreisdiagramm nur mit CSS

Das Erstellen statischer, kuchenförmiger Elemente ausschließlich mit CSS erfordert ein Verständnis spezifischer CSS-Eigenschaften.

Element # 2 Erstellung

Um Element Nr. 2 zu erstellen, das einen bestimmten Prozentsatz darstellt, verwenden Sie die CSS-Eigenschaft conic-gradient. Diese Eigenschaft erstellt einen kegelförmigen Farbverlauf, wobei der Scheitelpunkt in der Mitte des übergeordneten Elements positioniert ist. Der Winkel des Kegels wird durch den Prozentwert bestimmt, wobei 100 % einen Vollkreis darstellt.

Prozentwertverwaltung

Um die Form von Element Nr. 2 für unterschiedliche Prozentsätze zu verwalten, verwenden Sie eine Kombination der CSS-Eigenschaften:

• conic-gradient: Passen Sie den Winkel des Kegels an die an Prozentsatz.
• Clip-Pfad: Verwenden Sie einen kreisförmigen Clip-Pfad, um den sichtbaren Bereich des konischen Verlaufs zu begrenzen. Dadurch wird sichergestellt, dass die Form sowohl bei kleinen als auch bei großen Prozentsätzen korrekt angezeigt wird.

Animation

Um das Kreisdiagramm zu animieren, verwenden Sie die Animationseigenschaft und definieren Sie einen Ausgangszustand, der den Prozentsatz auf festlegt 0. Durch schrittweises Erhöhen des Prozentwerts füllt sich das Kreisdiagramm schrittweise.

Abgerundete Kanten

Zu Um abgerundete Kanten zu erzielen, verwenden Sie einen radialen Farbverlauf mit zwei Farbstopps. Der erste Stopp bei 98 % erzeugt eine subtile Hervorhebung, während der zweite Stopp bei 100 % #0000 verwendet, um eine scharfe Grenze zu erzeugen. Eine Maske oder -Webkit-Maske wird angewendet, um Teile des Farbverlaufs selektiv auszublenden.

Beispielcode

.pie {
  --p: 20;
  --b: 22px;
  --c: darkred;
  --w: 150px;
  
  width: var(--w);
  aspect-ratio: 1/1;
  position: relative;
  display: inline-grid;
  margin: 5px;
  place-content: center;
  font-size: 25px;
  font-weight: bold;
  font-family: sans-serif;
}

.pie:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%), #0000 0);
  mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
}

.pie:after {
  inset: calc(50% - var(--b)/2);
  background: var(--c);
  transform: rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(var(--w)/2 - 50%));
}

Das obige ist der detaillierte Inhalt vonWie kann ich ein prozentuales Kreisdiagramm nur mit CSS erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!