clip-path-Generator
Wählen Sie eine Form, passen Sie sie an und kopieren Sie das CSS. Kein Bild nötig.
- Läuft in Ihrem Browser — Ihr Text wird nirgendwohin gesendet
- Ohne Anmeldung, ohne Kontingent, so oft nutzbar, wie Sie möchten
So funktioniert es
clip-path schneidet ein Element auf eine Umrisslinie zu. Alles außerhalb der Form wird weder gezeichnet noch ist es anklickbar – das ist eine echte Form und nicht das Bild einer Form, und es funktioniert bei jedem Element, auch bei Bildern und Videos.
Prozentwerte statt Pixel
Polygonpunkte werden als Prozentwerte von Breite und Höhe des Elements angegeben, sodass sich die Form mit dem Element dehnt, statt bei einer anderen Größe zu zerbrechen. Dadurch ist sie in einem responsiven Layout nutzbar.
Klicks folgen der Form
Das unterscheidet clip-path von einer dekorativen Überlagerung. Der weggeschnittene Bereich erhält überhaupt keine Zeigerereignisse, sodass ein dreieckiger Button für die Maus ebenso dreieckig ist wie für das Auge.
Zwischen Formen animieren
Ein Polygon kann nur dann sanft in ein anderes übergehen, wenn beide dieselbe Anzahl von Punkten haben. Der übliche Trick ist, die einfachere Form mit doppelten Punkten aufzufüllen, damit die Anzahl passt – ein Dreieck, das mit vier Punkten geschrieben wird, von denen zwei an derselben Stelle liegen, kann sich in ein Quadrat verwandeln.
Die -webkit--Zeile
Aktuelle Browser brauchen nur die Eigenschaft ohne Präfix. Die Kopie mit Präfix ist enthalten, weil einige ältere Safari-Versionen sie noch benötigen und es nichts kostet, sie stehen zu lassen.
Was es nicht leistet
Es schneidet zu; es ordnet nichts neu an. Umgebender Text behandelt das Element weiterhin als sein ursprüngliches Rechteck. Damit Text eine Form umfließt, brauchen Sie shape-outside, das dieselbe Syntax verwendet.
clip-path-Generator – Fragen
Bleiben die abgeschnittenen Bereiche anklickbar?
Nein. Alles außerhalb der Form erhält keine Zeigerereignisse, was meist genau das ist, was man will.
Kann ich einen clip-path animieren?
Zwischen Polygonen mit gleicher Punktanzahl, ja. Füllen Sie die einfachere Form mit doppelten Punkten auf, damit die Anzahl übereinstimmt.
Umfließt Text die Form?
Nein. clip-path schneidet nur zu. Zum Umfließen verwenden Sie shape-outside.
Wird das Präfix -webkit- benötigt?
Nur für ältere Safari-Versionen. Jeder aktuelle Browser unterstützt die Eigenschaft ohne Präfix.
Kann ich es auf einem Bild oder Video verwenden?
Ja, bei jedem Element.