<basic-shape>

Übersicht

Der <basic-shape> CSS Datentyp kann durch Grundform Funktionen angegeben werden. Wenn diese Syntax zur Definition von Formen verwendet wird, wird die Referenzbox durch jede Eigenschaft definiert, die <basic-shape> Werte benutzt. Das Koordinatensystem für die Form hat seinen Ursprung in der linken oberen Ecke der Referenzbox, wobei die x-Achse nach rechts verläuft und die y-Achse nach unten. Alle Längen, die in Prozent ausgedrückt werden, werden durch die verwendeten Maße der Referenzbox bestimmt.

Mögliche Formen

Die folgenden Formen werden unterstützt. Alle <basic-shape> Werte verwenden die funktionale Schreibweise und werden durch die Wertdefinitionssyntax definiert.

inset()

inset( <shape-arg>{1,4} [round <border-radius>]? )

Definiert ein eingefügtes Rechteck.

Falls alle der ersten vier Argumente angegeben werden, repräsentieren sie den oberen, rechten, unteren und linken Versatz vom Referenzbox Inneren, der die Positionen der Ränder des eingefügten Rechtecks bestimmt. Diese Argumente folgen der Syntax der margin Kurzform, die es erlaubt, alle vier Einsätze mittels einem, zwei oder vier Werten zu setzen.

Das optionale <border-radius> Argument definiert abgerundete Ecken für das eingefügte Rechteck und benutzt die border-radius Kurzform Syntax.

Ein Paar von Einsätzen in beiden Dimensionen, die mehr als die verwendete Dimension hinzufügen (wie linke und rechte Einsätze von jeweils 75%) definieren eine Form, die keinen Bereich einschließt. Es ergibt sich somit ein leerer Bereich.

polygon()

polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )

<fill-rule> repräsentiert die Füllregel, die verwendet wird, um den Innenbereich des Polygons zu bestimmen. Mögliche Werte sind nonzero und evenodd. Der Standardwert ist nonzero.

Jedes Paar Argument der Liste repräsentiert x_i und y_i - die x- und y-Achsen-Koordinaten des i-ten Eckpunkts des Polygons.

circle()

circle( [<shape-radius>]? [at <position>]? )

Das <shape-radius> Argument repräsentiert den Radius des Kreises. Negative Werte sind ungültig. Ein Prozentwert wird durch die verwendete Breite und Höhe der Referenzbox über die Formel sqrt(width^2+height^2)/sqrt(2) bestimmt.

Das <position> Argument definiert den Mittelpunkt des Kreises. Falls nicht angegeben, wird center verwendet.

ellipse()

ellipse( [<shape-radius>{2}]? [at <position>]? )

Das <shape-radius> Argument repräsentiert den x- und den y-Achsen Radius der Ellipse in dieser Reihenfolge. Negative Werte sind hierbei ungültig. Prozentwerte werden durch die verwendete Breite (für die x-Achse) und die verwendete Höhe (für die y-Achse) der Referenzbox bestimmt.

Das <position> Argument definiert den Mittelpunkt des Kreises. Falls nicht angegeben, wird center verwendet.

Die Argumente, die oben nicht definiert werden, werden folgendermaßen definiert:

<shape-arg> = <length> | <percentage>
<shape-radius> = <length> | <percentage> | closest-side | farthest-side

Bestimmt einen Radius für einen Kreis oder eine Ellipse. Falls nicht angegeben, wird closest-side verwendet.

closest-side verwendet die Länge vom Mittelpunkt der Form zur nähesten Seite der Referenzbox. Für Kreise ist dies die näheste Seite in beliebiger Richtung. Für Ellipsen ist dies die näheste Seite in Radiusrichtung.

farthest-side verwendet die Länge vom Mittelpunkt der Form zur entferntesten Seite der Referenzbox. Für Kreise ist dies die entfernteste Seite in beliebiger Richtung. Für Ellipsen ist dies die entfernteste Seite in Radiusrichtung.

Berechnete Werte von Grundformen

Die Werte in einer <basic-shape> Funktion werden wie spezifiziert berechnet mit folgenden Ausnahmen:

• Ausgelassene Werte werden einbezogen und deren Standardwerte verwendet.
• Eine <position> Wert in circle() oder  ellipse() wird als ein Versatzpaar (horizontal, dann vertikal) vom oberen linken Ursprung berechnet, wobei jeder Versatz als Kombination einer absoluten Länge und einem Prozentwert angegeben wird.
• Ein <border-radius> Wert in inset() wird als eine erweiterte Liste aller acht <length> oder Prozentwerte berechnet.

Interpolation von Grundformen

• Beide Formen müssen die gleiche Referenzbox verwenden.
• Falls beide Formen vom gleichen Typ sind, d. h. vom Typ ellipse() oder circle(), und keiner der Radii die Schlüsselwörter closest-side oder farthest-side verwenden, wird zwischen jedem Wert der Formfunktionen interpoliert.
• Falls beide Formen vom Typ inset() sind, wird zwischen jedem Wert der Formfunktionen interpoliert.
• Falls beide Formen vom Typ polygon() sind, beide Polygone die gleiche Anzahl an Eckpunkten haben und die gleiche <fill-rule> verwenden, wird zwischen jedem Wert der Formfunktionen interpoliert.
• In allen anderen Fällen ist keine Interpolation definiert.

Beispiele

Animiertes Polygon

In diesem Beispiel nutzten wir eine @keyframes Regel, um den clip-Pfad zwischen zwei Polygonen zu animieren. (In diesem Beispiel müssen beide Polygone die selbe Anzahl Kanten haben.)

HTML

<div></div>

CSS

div {
  width: 300px;
  height: 300px;
  background: repeating-linear-gradient(red, orange 50px);
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  animation: 4s poly infinite alternate ease-in-out;
  margin: 10px auto;
}

@keyframes poly {
  from {
    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  }

  to {
    clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%);
  }
}

Ergebnis

Spezifikationen

Browser Kompatibilität

Siehe auch

• shape-outside