So verwenden Sie es
- Tippen Sie unter Klassenname einen Namen für die Regel ein, etwa dreieck, und wählen Sie eine Form.
- Bei einem Polygon ziehen Sie einen Punkt auf der Vorschau oder tippen x und y in die Felder ein. Mit Punkt hinzufügen und Letzten Punkt entfernen ändern Sie die Anzahl.
- Bei inset, circle oder ellipse tippen Sie die Zahlen in die Felder ein. Die Vorschau zeichnet sofort neu.
- Kopieren Sie die Regel unter CSS in Ihr Stylesheet und setzen Sie die Klasse auf das Element, das Sie zuschneiden wollen.
Die vier Formen
Das CSS Shapes Module definiert die Grundformen, die clip-path annimmt. Ein Polygon ist eine Liste von Punkten, jeweils mit einem x- und einem y-Wert; die Punkte werden in der angegebenen Reihenfolge verbunden. Ein inset schneidet die Box an vier Abständen, angegeben als oben, rechts, unten und links. Ein Kreis oder eine Ellipse hat einen Radius bzw. zwei Radien und einen Mittelpunkt, der nach dem Wort at folgt.
- polygon(50% 0%, 100% 100%, 0% 100%) hat drei Punkte, jeweils mit einem x- und einem y-Wert in Prozent.
- inset(10% 20% 10% 20%) schneidet 10 % oben und unten und 20 % links und rechts ab.
- circle(60px at 50% 50%) hat einen Radius von 60 px und seinen Mittelpunkt in der Mitte der Box.
Prozentwerte und die Bezugsbox
Ein Prozentwert in einem Punkt, einem Abstand oder einer Mitte ist ein Anteil der Box. Die Spezifikation bezieht ihn auf die tatsächliche Größe der Bezugsbox. Das CSS Masking Module legt fest, dass ohne angegebene Bezugsbox die Rahmenbox gilt. Teile des Elements außerhalb der Form werden nicht gezeichnet.
Was das Werkzeug nicht schreibt
- Eine Füllregel für ein Polygon, die round-Angabe eines inset sowie die Formen url() und path() von clip-path.
- Einen Prozentradius für einen Kreis oder eine Ellipse. Der Text der Formen, den dieses Werkzeug gelesen hat, sagt nicht, wie er aufgelöst wird, deshalb sind die Radien in px angegeben.
Beispiel: ein Dreieck
Ein Dreieck ist ein Polygon mit drei Punkten: die Mitte oben, unten rechts und unten links der Box. Die Tabelle nennt jeden Punkt. Die Regel, die das Werkzeug schreibt, lautet für die Klasse dreieck: clip-path: polygon(50% 0%, 100% 100%, 0% 100%).
| Punkt | x | y |
|---|---|---|
| 1 | 50% | 0% |
| 2 | 100% | 100% |
| 3 | 0% | 100% |
Häufig gestellte Fragen
Warum sind die Radien eines Kreises oder einer Ellipse in Pixel angegeben?
Der Text der Formen sagt nicht, wie ein Prozentradius für circle() und ellipse() aufgelöst wird, deshalb bietet das Werkzeug nur Pixel an. Ein Radius in Pixel hat eine eindeutige Bedeutung, und die Vorschau zeichnet ihn in der Größe, die die Box auf Ihrem Bildschirm hat.
Warum verschwindet die Form, wenn ich einen falschen Wert eintippe?
Das Werkzeug zeigt den Grund in Rot und zeichnet dann keine Form, damit es nie eine falsche Regel ausgibt. Häufige Ursachen sind ein Wert außerhalb des Bereichs oder Abstände, die keinen Teil der Box übrig lassen.
Spielt die Reihenfolge der Punkte eine Rolle?
Ja. Die Punkte werden in der Reihenfolge geschrieben, in der Sie sie aufführen, und diese Reihenfolge zeichnet den Umriss. Wenn Sie einen Punkt verschieben, ändert sich die Form, die übrigen Punkte bleiben unverändert.
Worin unterscheidet sich clip-path von border-radius?
clip-path schneidet das Element auf eine Form zu, sodass der Teil außerhalb nicht gezeichnet wird. border-radius rundet nur die Ecken. Die Bezugsbox von clip-path ist die Rahmenbox, sofern keine andere angegeben ist.
Wie viele Punkte kann ein Polygon hier haben?
Von 3 bis 20. Mehr Punkte ergeben einen feineren Umriss, aber eine längere Regel, und die Vorschau arbeitet mit bis zu 20 Griffen.
Wird das CSS, das ich erstelle, irgendwohin gesendet?
Nein. Die Vorschau und die Regel entstehen in Ihrem Browser. Nichts wird gespeichert oder an unseren Server gesendet, deshalb kopieren Sie das CSS, bevor Sie die Seite verlassen.
Quellen
- W3C (englisch): CSS Shapes Module Level 1, Grundformen
- W3C (englisch): CSS Masking Module Level 1, die Eigenschaft clip-path
Zahlen und Text zuletzt geprüft: Donnerstag, 12. November 2026.