Verwenden Sie das Clip-Pfad-Attribut von CSS, um Elemente in kundenspezifische Formen wie Dreiecke, kreisf?rmige Kerben, Polygone usw. zu erregen, ohne sich auf Bilder oder SVGs zu verlassen. Zu den Vorteilen geh?ren: 1.. Unterstützt eine Vielzahl von Grundformen wie Circle, Ellipse, Polygon usw.; 2. reagierende Anpassung und anpassbar an mobile Terminals; 3. Einfach zu animation und kann mit Hover oder JavaScript kombiniert werden, um dynamische Effekte zu erzielen. 4. Es wirkt sich nicht auf den Layoutfluss aus und erfüllt nur den Anzeigebereich. H?ufige Verwendungen sind z. B. kreisf?rmiger Clip-Pfad: Kreis (50px in der Mitte) und Dreieck-Clip-Pfad: Polygon (50% 0%, 100% 100%, 0% 100%). Zu den Notizen geh?ren: gute Kompatibilit?t, unterstützt aber den alten IE nicht; Komplexe Formen k?nnen die Leistung beeinflussen. Clip-Pfad wirkt sich nach der Transformation aus und ?ndert sich nicht mit Rotation und Skalierung. Durch dynamisches ?ndern des Clip-Pfad-Werts k?nnen auch interaktive Effekte wie die Tasteerweiterung und die Verformung von Karten erreicht werden.

Um es direkt auszudrücken, k?nnen Sie den Schlüsselpunkt: Verwenden des clip-path -Attributs von CSS leicht verschiedene benutzerdefinierte Formen für Elemente wie Dreiecke, Polygone, kreisf?rmige Kerben usw. aufnehmen, ohne sich auf Bilder oder SVGs zu verlassen.

Warum Clip-Pfad w?hlen?

Im Webdesign müssen wir manchmal nicht respektul?re Formen erscheint. Die in der Vergangenheit verwendete übliche Methode bestand darin, PNG -Bilder oder SVG -Masken zu verwenden, diese Methoden sind jedoch nicht flexibel genug und sind nicht einfach zu warten. Und clip-path liefert eine reine CSS-L?sung, die:

• Unterstützt mehrere grundlegende Formen (Kreis, Ellipse, Polygon usw.)
• Kann reaktionsm??ig eingestellt werden
• Leicht zu animieren (obwohl nicht alle Browser überg?nge unterstützen)
• Es wirkt sich nicht auf den Layout -Fluss aus, sondern nur der "Cropped" -Partteil

Wie schreibe ich gemeinsame Formen?

Kreise und Ellipsen

 Clip-Pfad: Kreis (50px in der Mitte);
Clip-Pfad: Ellipse (50px 30px bei 20% 30%);

Dieser Typ eignet sich zum Herstellen von Avataren, kleinen Symbolen und anderen Orten, an denen kreisf?rmiger Anbaus erforderlich ist. Die Parameter sind der Radius bzw. die Mittelpunktposition.

Polygon Polygon ()

Dies ist der flexibelste und am h?ufigsten verwendete Typ und kann verschiedene komplexe Formen wie Dreiecke, Trapezoide und Sterne erzeugen.

 Clip-Pfad: Polygon (50% 0%, 100% 100%, 0% 100%);

Das obige Beispiel schneidet ein Rechteck in ein Dreieck. Die Koordinaten in Klammern repr?sentieren die Positionen jedes Scheitelpunkts und sind angeschlossen, um ein Diagramm zu bilden.

Tipps: Wenn Sie sich nicht sicher sind, wie Sie Koordinaten schreiben, k?nnen Sie einige Online -Tools verwenden, um die Generation wie Clippy zu unterstützen.

Ein paar Hinweise in praktischen Anwendungen

• Kompatibilit?t : Mainstream -Browser unterstützen es im Grunde genommen, aber es ist nicht mit der alten Version des IE kompatibel. Wenn das Projekt den IE unterstützen muss, wird empfohlen, eine alternative L?sung bereitzustellen.
• Responsive Verarbeitung : Die Verwendung prozentualer Einheiten erm?glicht es, dass sich der Anbausbereich mit dem für mobilen Terminals geeigneten Container ?ndern kann.
• Leistungsauswirkungen : Komplexe Polygone k?nnen die Rendering -Leistung beeinflussen, insbesondere beim Testen mit Animationen.
• Beziehung zur Transformation : clip-path wirkt sich nach Elementtransformation aus. Wenn Sie also Rotation, Skalierung und andere Effekte verwenden, ?ndert sich der Erntebereich auch nicht.

Wie erzeugt ich interessante Interaktionseffekte?

Sie k?nnen Hover oder JavaScript kombinieren, um clip-path dynamisch zu ?ndern, um Animationseffekte wie Expansion und Verformung zu erzielen.

Zum Beispiel die Auswirkung der allm?hlichen Anzeige des gesamten Inhalts nach einer Schaltfl?che:

 .Taste {
  Clip-Pfad: Polygon (0 0, 100% 0, 100% 30%, 0 30%);
  übergang: Clip-Pfad 0,3s Leichtigkeit;
}

.Button: Hover {
  Clip-Pfad: Polygon (0 0, 100% 0, 100% 100%, 0 100%);
}

Dies erm?glicht den visuellen Effekt von langsamer "Expandieren" aus einem kleinen Streifen, der für Szenen wie Karten, Navigationsmenüs usw. geeignet ist.

Grunds?tzlich ist das. Beherrschen Sie das Schreiben mehrerer g?ngiger Formen und fügen Sie eine kleine Fantasie clip-path .

Das obige ist der detaillierte Inhalt vonErstellen von benutzerdefinierten Formen mit CSS-Clip-Pfad. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!