<basic-shape>

Der <basic-shape> CSS Datentyp stellt eine geometrische Grundform dar. Er kann in den clip-path, shape-outside (en-US) und offset-path (en-US) CSS-Eigenschaften verwendet werden.

Syntax

Die unten aufgelisteten Funktionen definieren <basic-shape> -Werte.

Wenn eine Form erstellt wird, definiert sich der Referenzrahmen durch jede CSS-Eigenschaft, die <basic-shape> -Werte benutzt. Der Koordinatenursprung fĂŒr die Form liegt in der oberen linken Ecke des Referenzrahmens, wobei die x-Achse nach rechts und die y-Achse nach unten verlĂ€uft. Dieses Koordinatensystem ist in vielen Computergrafiksystemen ĂŒblich.

Form-Funktionen

Die folgenden Formen werden unterstĂŒtzt. Alle <basic-shape> Werte verwenden die funktionale Schreibweise und werden mithilfe der Wertdefinitionssyntax definiert.

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

Definiert ein nach innen versetztes Rechteck.

Wenn alle vier ersten Argumente vorhanden sind, stellen sie den Versatz des Rechtecks oben, links, rechts und unten dar. Der Versatz bezieht sich auf den Referenzrahmen. Wie auch bei der margin-Eigenschaft können weniger als vier Werte als Kurzform angegeben werden.

Die optionalen <border-radius>-Argumente definieren abgerundete Ecken fĂŒr das Rechteck. Auch hier ist die <border-radius>-Kurzform-Syntax zulĂ€ssig.

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

Definiert einen Kreis.

Das <shape-radius>-Argument stellt den Radius r des Kreises dar, negative Werte sind verboten. Ein Prozentwert bezieht sich auf sqrt(a^2+b^2)/sqrt(2), wobei a und b Höhe und Breite des Referenzrahmens darstellen. Dieser Referenzwert ist die LĂ€nge einer Seite eines Quadrats, das dieselbe FlĂ€che wie der Referenzrahmen hat.

Das <position>-Argument definiert den Mittelpunkt des Kreises. StandardmĂ€ĂŸig wird der Kreis in der Mitte des Referenzrahmens platziert.

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

Definiert eine Ellipse, deren Hauptachse und Nebenachse entlang der x- oder y-Achsen verlaufen.

Das <shape-radius> Argument reprĂ€sentiert den Radius entlang der x- bzw. y-Achse. Negative Werte sind ungĂŒltig. Prozentwerte werden im VerhĂ€ltnis zur Breite (fĂŒr die x-Achse) und Höhe (fĂŒr die y-Achse) des Referenzrahmens bestimmt.

Das <position>-Argument definiert den Mittelpunkt der Ellipse. StandardmĂ€ĂŸig wird die Ellipse in der Mitte des Referenzrahmens platziert.

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

Definiert ein Vieleck (Polygon).

<fill-rule> definiert die FĂŒllregel, die zur Bestimmung der InnenflĂ€che des Polygons verwendet werden soll. Mögliche Werte sind nonzero und evenodd. Der Standardwert ist nonzero.

Jedes Argumentpaar der Liste stellt die x- und y-Koordinate einer Ecke des Vielecks dar.

path()
path( [<fill-rule>,]? <string>)

Definiert einen SVG-Pfad, also eine Kombination aus Kurven, Strecken und Punkten.

<fill-rule> definiert die FĂŒllregel, die zur Bestimmung der InnenflĂ€che des Polygons verwendet werden soll. Mögliche Werte sind nonzero und evenodd. Der Standardwert ist nonzero.

<string> entspricht dem d-Attribut des SVG-Pfades und ist der SVG-Pfad-Text in AnfĂŒhrungszeichen.

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

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

closest-side verwendet den Abstand des Mittelpunkts der Form zur nĂ€chsten Seite des Referenzrahmens. FĂŒr Kreise ist dies die nĂ€chste Seite in beliebiger Richtung. FĂŒr Ellipsen ist dies die nĂ€chste Seite in Radiusrichtung.

farthest-side verwendet die LĂ€nge vom Mittelpunkt der Form zur entferntesten Seite der Referenzrahmens. 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 angegeben berechnet, mit folgenden Ausnahmen:

  • Anstelle von ausgelassenen Werten werden Standardwerte verwendet.
  • Ein <position>-Wert in circle() oder  ellipse() wird als ein Versatzpaar (horizontal, dann vertikal) vom 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>-Werte oder Prozentwerte berechnet.

Interpolation von Grundformen

Zur Interpolation zwischen zwei Grundformen werden die folgenden Regeln angewandt. In den Formfunktionen werden alle Werte als Liste interpoliert. Die Listenwerte werden, soweit möglich, als <length>, <percentage> oder calc-Ausdruck interpoliert. Falls die Listenwerte nicht diesen Typen entsprechen, jedoch identisch sind (wie beispielsweise Zahlen ungleich null an der gleichen Position innerhalb beider Listen), werden diese Werte interpoliert.
  • Beide Formen mĂŒssen den gleichen Referenzrahmen verwenden.
  • Falls beide Formen vom gleichen Typ sind, d. h. vom Typ ellipse() oder circle(), und keiner der Radien die SchlĂŒsselwörter closest-side oder farthest-side verwendt, 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 Vielecke die gleiche Anzahl an Eckpunkten haben und die gleiche <fill-rule> (en-US) verwenden, wird zwischen jedem Wert der Formfunktionen interpoliert.
  • In allen anderen FĂ€llen findet keine Interpolation statt.

Beispiele

Animiertes Polygon

In diesem Beispiel nutzten wir eine @keyframes Regel, um den Pfad zwischen zwei Vielecken zu animieren. (In diesem Beispiel mĂŒssen beide Vielecke dieselbe 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

Spezifikation Status Anmerkung
CSS Shapes Module Level 1
Die Definition von '<basic-shape>' in dieser Spezifikation.
AnwĂ€rter Empfehlung UrsprĂŒngliche Definition.

Browser KompatibilitÀt

BCD tables only load in the browser

Siehe auch