Tricks to Cut Corners Using CSS Mask and Clip-Path Properties

We recently covered creating fancy borders with CSS mask properties, and now we are going to cut the corners with CSS mask and clip-path! A lot of techniques exist to cut different shapes from the corners of any element. In this article, we will consider modern techniques to create unique corner shapes while trying to work from reusable code that allows us to produce different results by adjusting variables.

Check this online tool to get an idea of what we are building. It’s a CSS generator where you select the shape, the corners, and the size then you get the code in no time!

We mainly have two types of cuts: a circular one and an angled one. For each, we can get the full shape or the border-only shape, not to mention that we can select the corners we want to cut. A lot of combinations!

Like in the previous article, we will make lots of use of the CSS mask property. So, if you are not familiar with it, I recommend reading the quick primer I wrote before continuing.

Kreisförmiger Ausschnitt

Für einen kreisförmigen oder abgerundeten Ausschnitt verwenden wir radial-gradient(). Um vier Ecken auszuschneiden, ist die logische Lösung, vier Verläufe zu erstellen, einen für jede Ecke.

Jeder Verlauf nimmt ein Viertel der Elementdimensionen ein. Die Syntax des Verlaufs ist selbsterklärend.

radial-gradient(circle 30px at top left, #0000 98%, red) top left;

Übersetzt rendert dies einen Kreis in der oberen linken Ecke mit einem Radius von 30px. Die Hauptfarbe ist transparent (#0000) und der Rest ist red. Der gesamte Verlauf ist auch so platziert, dass er in der oberen linken Ecke des Elements beginnt. Gleiche Logik für die drei anderen Verläufe. Das Schlüsselwort circle kann weggelassen werden, da wir explizit einen Wert für den Radius angegeben haben.

Wie im vorherigen Artikel werde ich diesmal etwas größere oder kleinere Werte verwenden, um schlechte visuelle Ergebnisse zu vermeiden. Hier verwende ich 98% anstelle von 100%, um gezackte Kanten zu vermeiden, und 51% anstelle von 50%, um eine Überlappung zwischen den Verläufen zu erzeugen und weiße Leerstellen zu vermeiden. Diese Logik wird in diesem Artikel beibehalten. Tatsächlich werden Sie feststellen, dass das Hinzufügen oder Entfernen von 1% oder 1deg typischerweise zu einem schönen visuellen Ergebnis führt.

Wir wenden dies auf die CSS-Eigenschaft mask an und sind fertig!

Wir können diesen Code tatsächlich etwas optimieren.

--g: #0000 98%,#000;
--r: 30px;
mask:
  radial-gradient(var(--r) at 0    0   ,var(--g)) 0    0,
  radial-gradient(var(--r) at 100% 0   ,var(--g)) 100% 0,
  radial-gradient(var(--r) at 0    100%,var(--g)) 0    100%,
  radial-gradient(var(--r) at 100% 100%,var(--g)) 100% 100%;
mask-size: 51% 51%;
mask-repeat: no-repeat;

Auf diese Weise verwenden wir benutzerdefinierte Eigenschaften für die redundanten Werte und, als persönliche Präferenz, verwende ich numerische Werte für die Positionen anstelle von Schlüsselwörtern.

Im Generator verwende ich die folgende Syntax.

--g: #0000 98%,#000;
--r: 30px;
mask:
  radial-gradient(var(--r) at 0    0   ,var(--g)) 0    0   /51% 51% no-repeat,
  radial-gradient(var(--r) at 100% 0   ,var(--g)) 100% 0   /51% 51% no-repeat,
  radial-gradient(var(--r) at 0    100%,var(--g)) 0    100%/51% 51% no-repeat,
  radial-gradient(var(--r) at 100% 100%,var(--g)) 100% 100%/51% 51% no-repeat;

Die Kurzschreibweise ist einfacher zu generieren, plus der gesamte Wert kann als eine benutzerdefinierte Eigenschaft verwendet werden.

Können wir weniger Verläufe verwenden, wenn wir wollen?

Sicher! Ein Verlauf kann die Arbeit erledigen. Hovern Sie über das Folgende, um den Trick zu sehen.

Hier definieren wir einen radial-gradient() ohne Größe (standardmäßig ist er 100% hoch und 100% breit). Dies erzeugt ein Loch in der Mitte. Wir verschieben/bewegen den Verlauf um die halbe Breite und Höhe des Bildes, um das Loch in eine Ecke zu verschieben. Da die CSS-Maske standardmäßig wiederholt wird, erhalten wir dasselbe an jeder Ecke. Wir haben vier ausgeschnittene Ecken mit nur einem Verlauf!

Der einzige Nachteil dieser Methode ist, dass wir die Breite und Höhe des Elements im Voraus kennen müssen.

Können wir nicht -50% anstelle der halben Breite und Höhe verwenden?

Leider können wir das hier nicht tun, da Prozentsätze sich bei der Verwendung mit der CSS-Eigenschaft mask-position nicht gleich verhalten wie Pixelwerte. Sie sind tückisch.

Ich habe eine detaillierte Stack Overflow-Antwort, die den Unterschied erklärt. Sie befasst sich mit background-position, aber die gleiche Logik gilt für die CSS-Eigenschaft mask-position.

Wir können jedoch einige Tricks anwenden, um es mit Prozentwerten und ohne Kenntnis der Breite oder Höhe zu funktionieren. Wenn ein Verlauf (oder eine Hintergrundebene) eine Breite und Höhe gleich dem Element hat, können wir sie nicht mit Prozentwerten bewegen. Also müssen wir ihre Größe ändern!

Ich definiere eine Größe, die 99,5 % 99,5 % entspricht. Ich reduziere 0,5 % von Breite und Höhe, um einen Wert zu erhalten, der sich von 100 % unterscheidet, und behalte gleichzeitig das gleiche visuelle Ergebnis bei, da wir keinen großen Unterschied zwischen 100 % und 99,5 % bemerken werden. Da unser Verlauf nun eine andere Größe als 100 % hat, können wir ihn mit Prozentwerten bewegen.

Ich werde nicht die gesamte Mathematik im Detail erläutern, aber um ihn um die halbe Breite und Höhe zu bewegen, müssen wir diese Gleichung verwenden.

100% * (50/(100 - 99.5)) = 100% * 100 = 10000%

Es ist ein seltsamer Wert, aber er erfüllt seinen Zweck.

mask: radial-gradient(30px,#0000 98%,#000) 10000% 10000%/99.5% 99.5%

Wie Sie sehen können, funktioniert der Trick einwandfrei. Unabhängig von der Größe des Elements können wir vier Ecken mit nur einem Verlauf ausschneiden. Diese Methode hat jedoch einen kleinen Nachteil, wenn die Breite oder Höhe des Elements ein Dezimalwert ist. Hier ist ein Beispiel mit einem Bild mit einer Breite von 150,5 px.

Die Verwendung von 99,5 % in Kombination mit 150,5 px führt zu Rundungsfehlern, die die Berechnung beeinträchtigen und dazu führen, dass die Maske nicht richtig ausgerichtet wird. Verwenden Sie diese Methode daher mit Vorsicht.

Erraten Sie es? Es gibt eine Lösung mit einem Verlauf und ohne Rundungsfehler. Mit dem folgenden Code.

mask: radial-gradient(30px at 30px 30px,#0000 98%,#000) -30px -30px

Der Trick besteht darin, ein Loch in der oberen linken Ecke zu erstellen und es mit einem negativen Versatz zu bewegen, um die vier Ecken abzudecken. Hovern Sie über das Folgende, um den Trick zu sehen.

Diese Methode ist perfekt, da sie einen Verlauf verwendet und keine Rundungsfehler aufweist, aber sie hat einen Nachteil. Der Wert des Radius wird 5 Mal verwendet. Keine große Sache, da wir dafür eine benutzerdefinierte Eigenschaft verwenden können.

--r: 30px;
mask: radial-gradient(var(--r) at var(--r) var(--r),#0000 98%,#000) calc(-1*var(--r)) calc(-1*var(--r))

Fassen wir die drei gerade behandelten Methoden kurz zusammen.

• Die erste Methode verwendet vier Verläufe und hat keine Nachteile in Bezug auf die Verwendung. Sicher, sie ist wortreich, aber sie funktioniert mit jeder Art von Element und Größe.
• Die zweite Methode verwendet einen Verlauf, kann aber in einigen besonderen Fällen fehlschlagen. Sie ist für Elemente mit fester Größe geeignet. Sie ist in Ordnung zu verwenden, aber vielleicht seltener.
• Die dritte Methode verwendet einen Verlauf und hat keine Rundungsfehler. Sie ist die perfekte Methode von allen, erfordert aber die mehrfache Verwendung des Radius innerhalb des Verlaufswertes.

Der Generator unterstützt nur die erste und dritte Methode.

Nachdem wir nun den Fall mit allen Ecken gesehen haben, deaktivieren wir einige davon. Bei der ersten Methode entfernen wir für jede Ecke, die wir nicht ausschneiden möchten, ihren Verlauf und passen die Größe dessen an, was übrig bleibt.

Um die obere rechte Ecke zu deaktivieren.

• Wir entfernen den Verlauf oben rechts (den blauen).
• Wir haben eine leere Ecke, also vergrößern wir die Größe des roten Verlaufs (oder des violetten), um diesen verbleibenden Platz zu füllen.

Fertig!

Sie sehen wahrscheinlich, wie viele Möglichkeiten und Kombinationen wir hier haben. Wenn wir N Ecken ausschneiden wollen (wobei N von 1 bis 4 reicht), verwenden wir N Verläufe. Alles, was wir brauchen, ist die richtige Einstellung der Größe jedes einzelnen, um keinen Platz zu lassen.

Was ist mit den anderen Methoden, bei denen es nur einen Verlauf gibt? Wir werden einen weiteren Verlauf benötigen! Diese beiden Methoden verwenden nur einen radial-gradient(), um die Ecken auszuschneiden, also verlassen wir uns auf einen weiteren Verlauf, um das „auszuschneiden“. Wir können dafür einen conic-gradient() mit vier Abschnitten verwenden.

conic-gradient(red 25%, blue 0 50%, green 0 75%, purple 0)

Wir fügen ihn über dem radialen Verlauf hinzu, um das Folgende zu erhalten.

Der conic-gradient() überdeckt den radial-gradient() und keine Ecke ist ausgeschnitten. Ändern wir eine Farbe im conic-gradient() zu transparent. Zum Beispiel die oben rechts.

Hast du das gesehen? Wir haben eine Ecke des radial-gradient() freigelegt und enden mit einer ausgeschnittenen Ecke!

Nun machen wir dasselbe, aber für die untere linke Ecke.

Ich denke, Sie haben den Trick jetzt verstanden. Indem wir die Farben des conic-gradient() von opak zu transparent ändern, legen wir die Ecken frei, die wir ausschneiden wollen, und erhalten alle möglichen Kombinationen.

Nun fragen Sie sich wahrscheinlich, welche Methode Sie wann verwenden müssen. Wie gesagt, ich empfehle die zweite Methode wegen des Rundungsproblems nicht sehr, aber Sie müssen die beiden anderen je nach Anzahl der Ausschnitte verwenden.

Um vier Ecken auszuschneiden, benötigt die erste Methode vier Verläufe, während die dritte nur einen Verlauf benötigt, also verwenden wir letztere. Um eine Ecke auszuschneiden, benötigt die erste Methode einen Verlauf, während die dritte zwei Verläufe benötigt, also verwenden Sie die erste. Um zwei Ecken auszuschneiden, verwenden beide zwei Verläufe, und um drei Ecken auszuschneiden, verwendet eine Methode drei Verläufe und die andere nur zwei.

Indem wir die entsprechende Methode für jeden Fall auswählen, benötigen wir insgesamt nicht mehr als zwei Verläufe. Ich habe alle Methoden im Detail erläutert, aber am Ende sollten Sie den optimierten Code für jeden Fall wählen.

Kreisförmiger nur-Rand-Ausschnitt

Machen wir die Nur-Rand-Version der vorherigen Form. Mit anderen Worten, wir erzielen die gleiche Form, aber wir hohl den Füllstoff aus, sodass uns nur ein Rand der Form übrig bleibt.

Das ist etwas knifflig, weil wir verschiedene Fälle mit unterschiedlichem Code haben. Warnung: Ich werde hier viele Verläufe verwenden und nach Möglichkeiten suchen, die Anzahl davon zu reduzieren.

Es sollte beachtet werden, dass wir in diesem Fall ein Pseudo-Element betrachten werden. Nur den Rand anzuzeigen bedeutet, dass wir die innere „Füllung“ der Form ausblenden müssen. Das auf das Hauptelement anzuwenden, würde auch den Inhalt ausblenden – deshalb ist dies ein schöner Anwendungsfall für ein Pseudo-Element.

Eine ausgeschnittene Ecke

Dies erfordert einen radialen Verlauf und zwei konische Verläufe.

Das erste Beispiel zeigt den radialen Verlauf (in Rot) und beide konischen Verläufe (in Blau und Grün). Im zweiten Beispiel wenden wir alle davon innerhalb der CSS-Eigenschaft mask an, um die nur-Rand-Form mit einer ausgeschnittenen Ecke zu erstellen.

Wie das Diagramm zeigt, erstellt der radial-gradient() das Viertel eines Kreises und jeder conic-gradient() erstellt zwei senkrechte Segmente, um zwei Seiten abzudecken. Es sollte beachtet werden, dass überlappende Verläufe kein Problem darstellen, da wir den Wert der CSS-Eigenschaft mask-composite nicht ändern werden.

Durch die Verwendung desselben Codes und die Anpassung einiger Variablen können wir die Form für die anderen Ecken erhalten.

Zwei ausgeschnittene Ecken

Für die Zwei-Ecken-Konfiguration haben wir zwei Situationen.

In der ersten Situation gibt es zwei gegenüberliegende Ecken, für die wir zwei radiale Verläufe und zwei konische Verläufe benötigen.

Die Konfiguration ist fast die gleiche wie beim Ausschneiden nur einer Ecke: Wir fügen einen zusätzlichen Verlauf hinzu und aktualisieren einige Variablen.

In der zweiten Situation gibt es zwei benachbarte Ecken und in diesem Fall benötigen wir einen radialen Verlauf, einen konischen Verlauf und einen linearen Verlauf.

„Moment!“, könnten Sie ausrufen. „Wie deckt der konische Verlauf drei Seiten ab?“ Wenn Sie sich den Code ansehen, bemerken Sie das repeat-y. In allen Beispielen haben wir immer no-repeat verwendet, aber hier können wir eine davon wiederholen, um mehr Seiten abzudecken und die Anzahl der verwendeten Verläufe zu reduzieren.

Hier ist ein Beispiel mit nur dem conic-gradient(), um die Wiederholung zu verstehen. Der Trick besteht darin, eine Höhe von 100 % abzüglich der Randgröße zu haben, damit der Verlauf beim Wiederholen diesen Raum füllt und dabei die dritte Seite abdeckt.

Sie fragen sich wahrscheinlich, wie ein radialer Verlauf zwei Ecken ausschneidet. Dazu erstellen wir einen Halbkreis, den wir in der oberen linken Ecke platzieren. Dann schneiden wir durch die Verwendung eines negativen Versatzes zwei benachbarte Ecken aus. Hovern Sie über das Folgende, um den Trick zu verstehen.

Drei ausgeschnittene Ecken

Für diese Konfiguration benötigen wir zwei radiale Verläufe, einen konischen Verlauf und zwei lineare Verläufe.

Alle vier Ecken ausgeschnitten

Es erfordert einen radialen Verlauf und zwei lineare Verläufe, um alle vier Ecken auszuschneiden.

Ich kann Sie schreien hören: „Wie zur Hölle soll ich all diese Fälle auswendig lernen?!“ Sie müssen nichts auswendig lernen, da Sie den Code für jeden Fall ganz einfach mit dem Online-Generator generieren können. Alles, was Sie tun müssen, ist, den allgemeinen Trick zu verstehen und nicht jeden einzelnen Fall. Deshalb habe ich nur die ersten Konfigurationen im Detail behandelt – der Rest sind bloße Iterationen, die die anfängliche Grundlage des Tricks modifizieren.

Beachten Sie, dass wir in den Beispielen einem allgemeinen Muster gefolgt sind.

1. Wir fügen einen radial-gradient() an den Ecken hinzu, die wir ausschneiden wollen.
2. Wir füllen die Seiten entweder mit einem conic-gradient() oder einem linear-gradient(), um die endgültige Form zu erzeugen.

Es sollte beachtet werden, dass wir verschiedene Wege finden können, um die gleiche Form zu erzeugen. Was ich in diesem Beitrag zeige, sind die Methoden, die ich nach dem Ausprobieren vieler anderer Ideen für die besten halte. Möglicherweise haben Sie einen anderen Ansatz, den Sie für besser halten! Wenn ja, teilen Sie ihn unbedingt in den Kommentaren mit!

Abgeschrägter Ausschnitt

Lassen Sie uns eine andere Art von Ausschnittform angehen: den abgeschrägten Schnitt.

Wir haben zwei Parameter: die Größe und den Winkel des Ausschnitts. Um die Form zu erhalten, benötigen wir einen conic-gradient() für jede Ecke. Diese Konfiguration ist der des Beispiels, mit dem dieser Artikel begann, sehr ähnlich.

Hier ist eine Illustration einer Ecke, um den Trick zu verstehen.

Der Unterschied zwischen jeder Ecke ist ein zusätzlicher Versatz von 90deg in from und der Position at. Der vollständige Code sieht wie folgt aus.

--size: 30px;
--angle: 130deg;

--g: #0000 var(--angle), #000 0;
mask:
  conic-gradient(from calc(var(--angle)/-2 -  45deg) 
    at top    var(--size) left  var(--size),var(--g)) top left,
  conic-gradient(from calc(var(--angle)/-2 + 45deg) 
    at top    var(--size) right var(--size),var(--g)) top right,
  conic-gradient(from calc(var(--angle)/-2 - 135deg) 
    at bottom var(--size) left  var(--size),var(--g)) bottom left,
  conic-gradient(from calc(var(--angle)/-2 + 135deg) 
    at bottom var(--size) right var(--size),var(--g)) bottom right;
mask-size: 51% 51%;
mask-repeat: no-repeat;

Wenn wir eine Ecke deaktivieren möchten, entfernen wir den conic-gradient() für diese Ecke und aktualisieren die Größe einer anderen, um den verbleibenden Platz zu füllen, genau wie wir es beim kreisförmigen Ausschnitt getan haben. So sieht das für eine Ecke aus.

Wir können genau dasselbe für alle anderen Ecken tun, um den gleichen Effekt zu erzielen.

Zusätzlich zu CSS-Masken können wir auch die CSS-Eigenschaft clip-path verwenden, um die Ecken auszuschneiden. Jede Ecke kann mit drei Punkten definiert werden.

Die anderen Ecken haben den gleichen Wert mit einem Versatz von 100 %. Dies ergibt den endgültigen Code mit insgesamt 12 Punkten – drei pro Ecke.

/* I will define T = [1-tan((angle-90)/2)]*size */
clip-path: polygon(
  /* Top-left corner */
  0 T, size size,0 T, /* OR 0 0 */
  /* Top-right corner */
  calc(100% - T) 0,calc(100% - size) size,100% T, /* OR  100% 0 */
  /* Bottom-right corner*/
  100% calc(100% - T),calc(100% - size) calc(100% - size), calc(100% - T) 100%, /* OR 100% 100% */
  /* Bottom-left corner */ 
  T 100%, size calc(100% - size),0 calc(100% - T) /* OR 0 100% */
)

Beachten Sie die Kommentare OR in diesem Code. Sie definieren den Code, den wir berücksichtigen müssen, wenn wir eine bestimmte Ecke deaktivieren möchten. Um eine Ecke auszuschneiden, verwenden wir drei Punkte. Um eine Ecke nicht auszuschneiden, verwenden wir einen Punkt – das ist nichts anderes als die Koordinate dieser Ecke.

Der Sonderfall 90deg

Wenn der Winkel gleich 90deg ist, können wir den Code der Verlaufsversion optimieren und uns auf weniger Verläufe verlassen. Um vier Ecken auszuschneiden, können wir nur einen Verlauf verwenden.

--size: 30px;
mask: 
  conic-gradient(at var(--size) var(--size),#000 75%,#0000 0) 
  0 0/calc(100% - var(--size)) calc(100% - var(--size))

Erinnert Sie das nicht an etwas? Es ist exakt ähnlich dem kreisförmigen Ausschnitt! Für 90deg haben wir zwei Verlaufsverfahren, das erste, das wir zuvor detailliert beschrieben haben, bei dem jede Ecke mit einem Verlauf ausgeschnitten wird, und diese letzte Methode, bei der wir alle Ecken mit einem Verlauf ausschneiden. Ich denke, Sie kennen den Rest der Geschichte: Um einige Ecken nicht auszuschneiden, kombinieren wir die letzte Methode mit einem konischen Verlauf.

Zwei Methoden mit Verläufen, eine mit clip-path, wir müssen einen conic-gradient hinzufügen?! Ich bin verloren...

Wie ich sagte, kein Grund, sich alle Methoden und Tricks zu merken. Der Generator erledigt die Aufgabe, den Code für Sie zu generieren. Ich versuche einfach, diesen Artikel so detailliert wie möglich zu gestalten, um alle möglichen Fälle abzudecken.

Nur-Rand-Abgeschrägter Ausschnitt

Oof, wir haben endlich die letzte und kniffligste Form erreicht! Diese kann entweder mit Verläufen oder mit clip-path erreicht werden, aber gehen wir den clip-path-Ansatz.

Die Dinge würden komplex und wortreich werden, wenn wir den Verlaufsansatz wählen. Hier ist eine Demo, die diesen Punkt veranschaulicht.

Es gibt insgesamt neun Verläufe, und ich bin *immer noch* nicht mit der Berechnung fertig. Wie Sie sehen können, ist die Dicke des Randes falsch und das Endergebnis ist aufgrund der Natur von Verläufen und ihrer Antialiasing-Probleme unbefriedigend. Dieser Ansatz mag eine gute Übung sein, um die Grenzen von Verläufen auszuloten, aber ich empfehle ihn nicht in einer Produktionsumgebung.

Also zurück zur clip-path-Methode. Wir werden immer noch wortreichen Code erhalten, aber weniger schlimm, da der Generator die Aufgabe für uns mit einem saubereren Endergebnis erledigen kann.

Hier ist ein Überblick über den Pfad. Ich füge eine kleine Lücke hinzu, um die verschiedenen Punkte besser sehen zu können, aber wir sollten eine Überlappung von Punkten haben.

Die Art und Weise, wie wir die äußeren Punkte berechnen, ist die gleiche wie beim normalen abgeschrägten Ausschnitt. Für die inneren Punkte benötigen wir jedoch mehr Mathematik. Keine Sorge, ich erspare Ihnen einige „langweilige“ Geometrieerklärungen. Ich weiß, dass die meisten von Ihnen das nicht wollen, aber falls Sie dies vertiefen müssen, können Sie die JavaScript-Datei des Generators überprüfen, um den Code und die Mathematik zu finden, die ich zur Generierung der Form verwende.

Der Sonderfall 180deg

Es gibt einen besonderen Fall für den abgeschrägten Schnitt, den ich hervorheben möchte. Das ist, wenn wir einen Winkel von 180deg verwenden. Hier ist, was das ergibt.

Wir haben eine gerade Linie an der Ecke, daher können wir den clip-path-Code optimieren. Für die vollständige Form können wir acht Punkte (zwei Punkte pro Ecke) anstelle von 12 verwenden. Und für die Nur-Rand-Version können wir 18 Punkte (neun innere und äußere Punkte) anstelle von 26 verwenden. Mit anderen Worten, wir können den mittleren Punkt entfernen.

Die Nur-Rand-Form kann auch mit Verläufen erstellt werden. Aber anstatt neun Verläufe wie zuvor zu verwenden, können wir mit nur vier linearen Verläufen und einem sauberen Ergebnis auskommen.

Fazit

Wir haben gerade CSS-Masken mit Verläufen kombiniert, um einige schicke Formen zu erstellen, ohne auf Hacks und viel Code zurückgreifen zu müssen! Wir haben auch erfahren, wie viel Aufwand es kostet, die richtige Balance des Codes zu finden, um die richtigen Ergebnisse zu erzielen. Wir haben sogar ein paar Tricks gelernt, wie das Ändern von Werten um eine oder sogar eine halbe Einheit. CSS ist super mächtig!

Aber, wie wir besprochen haben, ist der Online-Generator, den ich erstellt habe, ein großartiger Ort, um den benötigten Code zu erhalten, anstatt ihn von Hand zu schreiben. Ich meine, ich habe all die Arbeit geleistet, um herauszufinden, wie das alles funktioniert, und ich würde wahrscheinlich immer noch auf diesen Artikel verweisen müssen, um mich zu erinnern, wie alles zusammengesetzt ist. Wenn Sie sich all das merken können, Hut ab! Aber es ist gut, einen Generator als Rückfalloption zu haben.