Tricks zum Schneiden von Ecken mit CSS-Maske und Clip-Pfad-Eigenschaften

In diesem Artikel werden kreative Eckschneidetechniken unter Verwendung von CSS- mask und clip-path -Eigenschaften untersucht. Wir werden auf früheren Arbeiten mit CSS -Masken aufbauen, um mithilfe wiederverwendbarer Code und einstellbarer Variablen verschiedene Eckformen zu erstellen. Ein Online -CSS -Generator wird darauf hingewiesen, die Ergebnisse zu visualisieren.

Zwei primäre Schnitttypen werden untersucht: kreisförmig und abgewinkelt. Jedes ermöglicht eine vollständige Form- oder Randausgänge sowie die Eckauswahl.

Die CSS mask -Maskeneigenschaft wird stark genutzt. Wenn sie unbekannt sind, wird vor dem Fortfahren eine schnelle Grundierung empfohlen.

Kreisschnitt

Kreisschnitte verwenden radial-gradient() . Zunächst werden vier Gradienten pro Ecke verwendet. Jeder Gradient deckt ein Viertel der Dimensionen des Elements ab. Ein Probenverlauf:

 <code>radial-gradient(circle 30px at top left, #0000 98%, red) top left;</code>

Dies schafft einen RADIUS-Kreis von 30px am oberen Links, transparent (#0000) in der Mitte und an anderer Stelle rot. Kleinere Anpassungen (z. B. 98% statt 100%) verhindern gezackte Kanten.

Optimierter Code verwendet benutzerdefinierte Eigenschaften:

 <code>--g: #0000 98%,#000; --r: 30px; mask: radial-gradient(var(--r) at 0 0 ,var(--g)) 0 0, radial-gradient(var(--r) at 100% 0 ,var(--g)) 100% 0, radial-gradient(var(--r) at 0 100%,var(--g)) 0 100%, radial-gradient(var(--r) at 100% 100%,var(--g)) 100% 100%; mask-size: 51% 51%; mask-repeat: no-repeat;</code>

Der Generator verwendet eine etwas andere, prägnantere Syntax.

Weniger Gradienten?

Ja! Ein Gradient kann ausreichen. Der Trick beinhaltet einen einzelnen radial-gradient() mit seiner Position eingestellt, um die Illusion von vier geschnittenen Ecken zu erzeugen. Diese Methode erfordert die Kenntnis der Dimensionen des Elements. Eine Problemumgehung mit Prozentsätzen und eine etwas kleinere Gradientengröße (99,5%) wird jedoch vorgestellt, weist jedoch Einschränkungen bei Dezimalabmessungen auf. Eine endgültige, überlegene Einzelgradient-Methode verwendet negative Offsets, um den gleichen Effekt ohne Rundungsprobleme zu erzielen.

Die Eckbehinderung wird erreicht, indem die relevanten Gradienten (en) und die verbleibenden Gradientengrößen eingestellt werden.

Rundrand-Grenzausschnitte

Erstellen von nur Grenzformen erfordert ein Pseudoelement, um Verschleierung von Inhalten zu vermeiden. Unterschiedliche Konfigurationen (ein, zwei, drei oder vier Schnittwunden) erfordern unterschiedliche Kombinationen von radial-gradient() und conic-gradient() um den gewünschten Randeffekt zu erzielen. Der Artikel beschreibt diese Kombinationen und zeigt die Verwendung von repeat-y , um die Anzahl der in einigen Fällen benötigten Gradienten zu verringern.

Abgewinkelte Ausschnitte

Abgewinkelte Schnitte verwenden conic-gradient() , eine pro Ecke. Jeder Gradient from und at Positionen werden eingestellt, um den abgewinkelten Schnitt zu erstellen. Die Deaktivierung von Ecken folgt dem gleichen Prinzip wie kreisförmige Schnitte. clip-path bietet eine Alternative und definiert jede Ecke mit drei Punkten. Eine Formel zur Berechnung dieser Punkte wird vorgesehen. Der 90-Grad-Winkelfall ermöglicht eine Optimierung unter Verwendung eines einzelnen Gradienten.

Rand nur abgewinkelte Ausschnitte

Die clip-path -Methode wird aufgrund von Komplexität und potenziellen Anti-Aliasing-Problemen mit Gradienten gegenüber Gradienten für nur abgewinkelte Grenzen bevorzugt. Der Artikel beschreibt den clip-path -Ansatz und beschreibt die Berechnung von inneren und äußeren Punkten. Der 180-Grad-Fall ermöglicht die Codeoptimierung.

Abschluss

Der Artikel demonstriert die Leistung und Flexibilität von CSS- mask und clip-path für die Erstellung komplexer Formen. Während detaillierte Erläuterungen abgeliefert werden, vereinfacht der dazugehörige Online -Generator die Codegenerierung und macht diese Techniken für verschiedene Designanforderungen zugänglich.

Das obige ist der detaillierte Inhalt vonTricks zum Schneiden von Ecken mit CSS-Maske und Clip-Pfad-Eigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!