Wie verwendet ich Clip-Pfad: Pfad (...), um die Breite und Höhe der verkürzten grafischen adaptiven Taste zu erstellen?

Tipps zum Erstellen von clip-path: path(...) zur adaptiven Größe der Graph-Größen

Wenn Sie einen Diagramm mit clip-path: path(...) schneiden, ist es ein häufiges Problem, die automatisch die Größe der Größenänderung auf der Button-Größe zu machen. Dieser Artikel bietet eine Lösung.

Der Schlüssel besteht darin, relative Einheiten (Prozentsätze) zu verwenden. Unabhängig davon, wie sich die Knopfgröße ändert, wird der Ausschnittpfad entsprechend angepasst.

Verstehen Sie zunächst das Koordinatensystem der path . Unter der Annahme, dass die Knopfbreite width ist und die Höhe der height ist, wird der Pfadpunkt unter Verwendung von Prozentsätzen definiert. Zum Beispiel einen Kreis einnehmen:

 Clip-Pfad: Pfad ('M 50% 0 A 50% 50% 0 0 1 100% 50% A 50% 50% 0 0 1 50% 100% A 50% 50% 0 1 0 50% A 50% 50% 0 1 50% 0 Z');

M 50% 0 bedeutet von der Oberseite der Mitte des Tastens; A 50% 50% 0 0 1 100% 50% Zeichnen Sie einen Bogen mit einem Radius von halben Breiten und Höhe des Knopfes und so weiter.

Der Pfad wird nach Prozentsatz proportional skaliert, unabhängig von den Änderungen der Knopfgröße, um einen adaptiven Effekt zu erzielen.

Um andere Formen zu erregen, passen Sie einfach die Pfadkoordinaten entsprechend der Form an und verwenden Sie Prozentsätze, um sicherzustellen, dass sie unterschiedliche Größen anpassen.

Das obige ist der detaillierte Inhalt vonWie verwendet ich Clip-Pfad: Pfad (...), um die Breite und Höhe der verkürzten grafischen adaptiven Taste zu erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!