CSS-clip-path-Beispiele in echten Layouts

Wähle die Sechseck-Vorlage, wechsle zur Ausgabe der Deklaration und übernimm deren clip-path-Regel in deine eigene Klasse für ein quadratisches Bild. Setze Breite und Höhe gleich sowie object-fit: cover; der vollständige CSS-Beispielcode nutzt eine 4:3-Demobox und sollte nicht unverändert auf den Avatar angewendet werden. Prüfe das Gesicht an jedem Rand; eine andere Polygonform verschiebt das Motiv nicht.

Wende das Chevron-Beispiel auf ein dekoratives Bild neben einem Call to Action an. Vergleiche dieselben Prozentkoordinaten in einer quadratischen und einer breiten Box: Sie skalieren mit jeder Achse, Winkel und Silhouette können sich also ändern. Prüfe neben dem Desktop auch ein schmales mobiles Layout. Halte wichtigen Text und den eigentlichen Link außerhalb des zugeschnittenen Dekorelements.

Probiere das Parallelogramm auf einer Dekorebene hinter einer Karte. Wende es nicht auf den gesamten Inhaltscontainer an, wenn dadurch Überschriften, Fokusrahmen oder Buttons abgeschnitten werden. Eine Form-Vorschau kann keine Tastatur-Barrierefreiheit nachweisen. Tab durch die fertige Komponente und stelle sicher, dass das fokussierte Steuerelement bei beiden Breiten sichtbar bleibt.

Beginne mit dem Sechseck und setze den ersten Punkt auf X 30 %, Y 0 %. Füge nach dem gewählten Punkt einen Punkt hinzu oder entferne einen; erlaubt sind 3–32 Punkte. Ziehe Punkte, gib Koordinaten von 0–100 % ein oder nutze Pfeiltasten (1 %; mit Shift 10 %). Kopiere nur die clip-path-Deklaration, um dein Layout zu behalten; vollständiges CSS enthält Beispielstile. Prüfe quadratische und breite Container auf Desktop und Mobilgeräten. Text und Fokusränder gehören außerhalb der beschnittenen Ebene; halte eine rechteckige Alternative bereit. CSS-Import sowie circle, ellipse und inset werden nicht unterstützt.

Toolars pflegt diesen Leitfaden und das verlinkte Werkzeug. Melde Abweichungen zwischen Anleitung und aktueller Ausgabe, damit beides gemeinsam geprüft werden kann.

Das herunterladbare Beispiel ist eine synthetische Testeingabe, keine Kundenfallstudie. Verwende beim Nachstellen dieselbe Eingabe und dieselben Einstellungen. Prüfe die heruntergeladene Datei anhand der beschriebenen Kriterien, nicht nur die Vorschau.

Die Prüfungen gelten nur für dieses Beispiel, nicht für alle Dateien, Browser oder Zielprogramme. Prüfe nach Werkzeugänderungen erneut und kontrolliere deine Ausgabe vor dem Teilen.

Synthetische Toolars-Muster · aktualisiert am 2026-09-13. Sie zeigen den Ablauf, nicht die Qualität echter Fotos oder Scans und nicht die Annahme durch eine Plattform.

Das CSS-Muster nutzt die Sechseck-Voreinstellung. Wähle in CSS clip-path Sechseck, setze den horizontalen Punkt auf 24 und den vertikalen Punkt auf 50. Vergleiche die beiden clip-path-Deklarationen im Download mit dem Muster; Farbe und Leerraum können abweichen. Teste breite und schmale Elemente: Prozentwerte folgen der Elementbox. Das Beschneiden allein sorgt nicht dafür, dass umgebender Text die Form umfließt.

Eingabemuster herunterladen