CSS-Generator für umgeknickte Seitenecken
Karten mit papierartig umgeknickter Ecke – sofort als CSS
Dieses Werkzeug erzeugt den plastischen Effekt einer leicht hochgerollten Papierecke für Karten und Dokument-Oberflächen. Sie wählen eine der vier Ecken, stellen Knickgröße, Schattenstärke sowie die Farben von Karte und Rückseite ein und sehen das Ergebnis sofort in der Live-Vorschau. Den fertigen CSS-Code kopieren Sie direkt in Ihr Projekt. Alle Berechnungen laufen ausschließlich im Browser, es werden keine Daten übertragen.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Wählen Sie über die Reiter die gewünschte Ecke: oben rechts, oben links, unten rechts oder unten links.
- Stellen Sie mit den Schiebereglern Knickgröße und Schattenstärke ein, bis die Tiefenwirkung passt.
- Legen Sie die Kartenfarbe und die Farbe der umgeknickten Rückseite über den Farbwähler oder per Texteingabe fest.
- Prüfen Sie die Vorschau und kopieren Sie den fertigen Code unten über die Schaltfläche „CSS kopieren“.
FAQ
- Kann ich das erzeugte CSS unverändert auf meiner Seite einsetzen?
- Ja. Es ist reines CSS mit der Klasse .curl-card und den Stilen für das Pseudoelement ::before – Sie fügen es ein und passen es an den Klassennamen Ihres Elements an.
- Lassen sich mehrere Ecken gleichzeitig umknicken?
- Das Werkzeug erzeugt Code immer für eine Ecke. Für mehrere Ecken wählen Sie nacheinander die jeweilige Richtung und kombinieren die Ergebnisse zu eigenen Klassen.
- Entsteht der Papierknick wirklich ohne Bilddatei?
- Ja. Ein Hintergrundverlauf schneidet die Ecke diagonal ab, und im Pseudoelement erzeugen ein weiterer Verlauf sowie ein drop-shadow-Filter die Tiefenwirkung – ganz ohne Bild.