CSS-clip-path-Generator
Erstellt clip-path mit Vorlagen wie Polygon, Kreis oder Stern samt Vorschau und CSS-Kopierfunktion
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Klicken Sie eine der häufig genutzten Formvorlagen an – Dreieck, Raute, Sechseck, Stern, Pfeil, Kreis, Ellipse – und das Tool erzeugt sofort den CSS-clip-path-Wert. Sie sehen den Zuschneide-Effekt live an einer farbigen Box oder einem selbst hochgeladenen Bild und können den Wert direkt bearbeiten oder unverändert kopieren.
Anleitung
- Klicken Sie die gewünschte Formvorlage an, um die clip-path-Form zu wählen.
- Bearbeiten Sie bei Bedarf den clip-path-Wert direkt, um die Koordinaten fein einzustellen.
- Laden Sie ein Vorschaubild, um die Anwendung auf ein echtes Foto zu sehen.
- Kopieren Sie das fertige clip-path-CSS und fügen Sie es beim gewünschten Element ein.
FAQ
- Wie funktioniert clip-path?
- Es lässt vom Element nur den Bereich innerhalb der angegebenen Form (Polygon, Kreis usw.) sichtbar und schneidet den Rest weg. Das Element wird nicht wirklich zerschnitten, sondern nur der Anzeigebereich maskiert – ändern Sie den Wert, erscheint der ursprüngliche Inhalt wieder vollständig.
- Kann ich die Polygon-Koordinaten direkt ändern?
- Ja. Im Eingabefeld können Sie im Format „polygon(x% y%, …)" die Koordinaten jedes Eckpunkts direkt bearbeiten. x ist der Anteil (%) von links, y der von oben. Bei fehlerhafter Syntax erscheint das Original ohne Zuschnitt, Sie können also unbesorgt experimentieren.
- Funktioniert das in allen Browsern?
- Grundformen wie polygon, circle und ellipse werden in aktuellen Browsern breit unterstützt, doch das Rendering kann je nach Gerät abweichen – prüfen Sie es daher vor dem Einsatz. Hochgeladene Bilder werden ohne Serverübertragung ausschließlich im Browser verarbeitet.