<basic-shape>

Der <basic-shape> Datentyp wird verwendet, um grundlegende Formen zu erstellen, einschließlich Rechtecke durch Behälterinset, durch Koordinatenabstand oder durch festgelegte Dimensionen, Kreise, Ellipsen, Polygone, Pfade und vom Autor erstellte Formen. Diese grundlegenden Formen werden durch eine <basic_shape> CSS-Funktion definiert, wobei jeder Wert einen Parameter erfordert, der der funktionsspezifischen Syntax der Form folgt.

Die gemeinsamen Parameter, die in der Syntax einiger grundlegender Formfunktionen verwendet werden, umfassen:

round <'border-radius'>

Definiert abgerundete Ecken für Rechtecke durch Behälterinset, Rechtecke durch Abstand und Rechtecke mit Dimensionen unter Verwendung der gleichen Syntax wie die CSS-Kurzformeigenschaft border-radius.

<shape-radius>

Definiert den Radius für einen Kreis oder eine Ellipse. Gültige Werte sind <length>, <percentage>, closest-side (der Standard) und farthest-side. Negative Werte sind ungültig.

Der Schlüsselwortwert closest-side verwendet die Länge vom Mittelpunkt der Form zur nächsten Seite des Referenzrahmens, um die Radiuslänge zu erstellen. Der Schlüsselwortwert farthest-side verwendet die Länge vom Mittelpunkt der Form zur entferntesten Seite des Referenzrahmens.

<position>

Definiert die Mitte der <position> eines Kreises oder einer Ellipse. Es ist standardmäßig center, wenn es ausgelassen wird.

<fill-rule>

Legt die fill-rule fest, die verwendet wird, um zu bestimmen, wie der Innenraum der durch die grundlegenden Formen definierte Form Polygon, Pfad und Form gefüllt werden soll. Mögliche Werte sind nonzero (der Standard) und evenodd.

Hinweis:><fill-rule> wird in offset-path nicht unterstützt und führt zur Ungültigkeit der Eigenschaft, wenn es verwendet wird.

Die inset() Funktion erstellt ein Inset-Rechteck, dessen Größe durch den Abstand jeder der vier Seiten seines Behälters und, optional, durch abgerundete Ecken definiert ist.

inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )

Wenn alle vier ersten Argumente bereitgestellt werden, repräsentieren sie die oberen, rechten, unteren und linken Versätze vom Referenzrahmen nach innen, die die Position der Kanten des Inset-Rechtecks definieren. Diese Argumente folgen der Syntax der Kurzform margin, die es erlaubt, alle vier Insets mit einem, zwei, drei oder vier Werten festzulegen.

Wenn ein Paar von Insets einer Dimension mehr als 100% dieser Dimension ausmacht, werden beide Werte proportional reduziert, sodass ihre Summe 100% ergibt. Zum Beispiel wird der Wert inset(90% 10% 60% 10%) mit einem oberen Inset von 90% und einem unteren Inset von 60% proportional zu inset(60% 10% 40% 10%) reduziert. Solche Formen, die keinen Bereich umschließen und keinen shape-margin haben, beeinflussen das Umfließen nicht.

Die rect() Funktion definiert ein Rechteck unter Verwendung der festgelegten Abstände von den oberen und linken Kanten des Referenzrahmens mit optionalen abgerundeten Ecken.

rect( [ <length-percentage> | auto ]{4} [ round <'border-radius'> ]? )

Wenn die rect() Funktion verwendet wird, definieren Sie nicht die Breite und Höhe des Rechtecks. Stattdessen geben Sie vier Werte an, um das Rechteck zu erstellen, wobei seine Dimensionen durch die Größe des Referenzrahmens und die vier Versatzwerte bestimmt werden. Jeder Wert kann entweder eine <length>, ein <percentage> oder das Schlüsselwort auto sein. Das Schlüsselwort auto wird als 0% für die oberen und linken Werte und als 100% für die unteren und rechten Werte interpretiert.

Die xywh() Funktion definiert ein Rechteck, das zu den angegebenen Abständen von den linken (x) und oberen (y) Kanten des Referenzrahmens positioniert ist und durch die angegebenen Breiten- (w) und Höhen- (h) Werte des Rechtecks, in dieser Reihenfolge, dimensioniert wird, mit optionalen abgerundeten Ecken.

xywh( <length-percentage>{2} <length-percentage [0,∞]>{2} [ round <'border-radius'> ]? )

Die circle() Funktion definiert einen Kreis unter Verwendung eines Radius und einer Position.

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

Das <shape-radius> Argument repräsentiert den Radius des Kreises, definiert entweder als <length> oder als <percentage>. Ein Prozentwert wird hier aus der verwendeten Breite und Höhe des Referenzrahmens als sqrt(width^2+height^2)/sqrt(2) aufgelöst. Wenn er weggelassen wird, wird der Radius durch closest-side definiert.

Die ellipse() Funktion definiert eine Ellipse durch zwei Radien und eine Position.

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

Die <shape-radius> Argumente repräsentieren rx und ry, die Radien der x-Achse und der y-Achse der Ellipse, in dieser Reihenfolge. Diese Werte sind entweder als <length> oder als <percentage> angegeben. Prozentwerte werden hier gegen die verwendete Breite (für den rx-Wert) und die verwendete Höhe (für den ry-Wert) des Referenzrahmens aufgelöst. Wenn nur ein Radiuswert angegeben ist, ist die ellipse()-Formfunktion ungültig. Wenn kein Wert angegeben wird, wird 50% 50% verwendet.

Die polygon() Funktion definiert ein Polygon unter Verwendung einer SVG fill-rule und einer Reihe von Koordinaten.

polygon( <'fill-rule'>? , [ <length-percentage> <length-percentage> ]# )

Die Funktion nimmt eine Liste von durch Kommas getrennten Koordinatenpaaren an, wobei jedes Paar aus zwei durch Leerzeichen getrennten <length-percentage> Werten als xi und yi Paar besteht. Diese Werte repräsentieren die x- und y-Achse-Koordinaten des Polygons an Position i (der Eckpunkt, an dem sich zwei Linien treffen).

Die path() Funktion definiert eine Form unter Verwendung einer SVG fill-rule und einer SVG Pfaddefinition.

path( <'fill-rule'>? , <string> )

Der erforderliche <string> ist ein SVG-Pfad als Zeichenkette. Die path() Funktion ist kein gültiger Wert für die shape-outside Eigenschaft.

Die shape() Funktion definiert eine Form mit einem anfänglichen Startpunkt und einer Reihe von Formbefehlen.

shape( <'fill-rule'>? from <coordinate-pair> , <shape-command># )

Der from <coordinate-pair> Parameter repräsentiert den Startpunkt für den ersten Formbefehl, und <shape-command> definiert einen oder mehrere Formbefehle, die den SVG-Pfadbefehlen ähnlich sind. Die shape() Funktion ist kein gültiger Wert für die shape-outside Eigenschaft.

Bei der Erstellung einer Form wird der Referenzrahmen durch die Eigenschaft definiert, die <basic-shape> Werte verwendet. Das Koordinatensystem für die Form hat seinen Ursprung standardmäßig in der oberen linken Ecke der Margin-Box des Elements, wobei die x-Achse nach rechts und die y-Achse nach unten verläuft. Alle in Prozent angegebenen Längen werden von den Dimensionen des Referenzrahmens aufgelöst.

Der Standard-Referenzrahmen ist die margin-box, wie im Bild unten dargestellt. Das Bild zeigt einen Kreis, der mit shape-outside: circle(50%) erstellt wurde, und die verschiedenen Teile des Box-Modells, wie sie in den Entwicklerwerkzeugen eines Browsers zu sehen sind. Die Form hier ist in Bezug auf die margin-box definiert.

Die Werte in einer <basic-shape> Funktion werden wie angegeben berechnet, mit den folgenden zusätzlichen Überlegungen:

• Für alle ausgelassenen Werte werden deren Standardwerte verwendet.
• Ein <position> Wert in circle() oder ellipse() wird als Paar von Versätzen von der oberen linken Ecke des Referenzrahmens berechnet: der erste Versatz ist horizontal, und der zweite ist vertikal. Jeder Versatz wird als <length-percentage> Wert angegeben.
• Ein <border-radius> Wert in inset() wird in eine Liste von acht Werten expandiert, die jeweils entweder eine <length> oder ein <percentage> sind.
• inset(), rect(), und xywh() Funktionen berechnen sich zur äquivalenten inset() Funktion.

Beim Animieren zwischen zwei <basic-shape> Funktionen werden die unten aufgeführten Interpolationsregeln befolgt. Die Parameterwerte jeder <basic-shape> Funktion bilden eine Liste. Damit eine Interpolation zwischen zwei Formen stattfinden kann, müssen beide Formen den gleichen Referenzrahmen verwenden, und die Anzahl und der Typ der Werte in beiden <basic-shape> Listen müssen übereinstimmen.

Jeder Wert in den Listen der beiden <basic-shape> Funktionen wird basierend auf seinem berechneten Wert als <number>, <length>, <percentage>, <angle>, oder calc() interpoliert, soweit möglich. Eine Interpolation kann immer noch stattfinden, wenn die Werte nicht einer dieser Datentypten sind, aber zwischen den beiden interpolierenden grundlegenden Formfunktionen identisch sind, wie z.B. nonzero.

• Beide Formen sind vom Typ ellipse() oder Typ circle(): Die Interpolation wird zwischen jedem entsprechenden Wert angewendet, wenn ihre Radien entweder als <length> oder als <percentage> angegeben sind (anstatt als Schlüsselwörter wie closest-side oder farthest-side).

• Beide Formen sind vom Typ inset(): Die Interpolation wird zwischen jedem entsprechenden Wert angewendet.

• Beide Formen sind vom Typ polygon(): Die Interpolation wird zwischen jedem entsprechenden Wert angewendet, wenn sie die gleiche <fill-rule> haben und die gleiche Anzahl von durch Kommas getrennten Koordinatenpaaren besitzen.

• Beide Formen sind vom Typ path(): Die Interpolation wird auf jeden Parameter als <number> angewendet, wenn die Pfadzeichenfolgen in beiden Formen die gleiche Anzahl, Art und Reihenfolge Pfadebefehle entsprechen.

• Beide Formen sind vom Typ shape(): Die Interpolation wird zwischen jedem entsprechenden Wert angewendet, wenn sie das identische Befehls-Schlüsselwort und das gleiche <by-to> Schlüsselwort verwenden. Wenn shape() in der clip-path Eigenschaft verwendet wird, interpolieren die beiden Formen, wenn sie auch die gleiche <fill-rule> haben.

  • Wenn sie das <curve-command> oder das <smooth-command> verwenden, muss die Anzahl der Kontrollpunkte für die Interpolation übereinstimmen.

  • Wenn sie das <arc-command> mit unterschiedlichen <arc-sweep> Richtungen verwenden, geht das interpolierte Ergebnis im Uhrzeigersinn (cw). Wenn sie unterschiedliche <arc-size> Schlüsselwörter verwenden, wird die Größe unter Verwendung des large Wertes interpoliert.

• Eine Form ist vom Typ path() und die andere ist vom Typ shape(): Die Interpolation wird zwischen jedem entsprechenden Wert angewendet, wenn die Liste der Pfadebefehle sowohl in der Anzahl als auch in der Reihenfolge identisch ist. Die interpolierte Form ist eine shape() Funktion, die die gleiche Liste von Pfadebefehlen beibehält.

In allen anderen Fällen erfolgt keine Interpolation und die Animation ist diskret.

In diesem Beispiel verwenden wir die @keyframes At-Regel, um einen Clip-Pfad zwischen zwei Polygonen zu animieren. Beachten Sie, dass beide Polygone die gleiche Anzahl von Eckpunkten haben, was für diese Art der Animation notwendig ist.

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

• Eigenschaften, die diesen Datentyp verwenden: clip-path, offset-path, shape-outside,
• CSS Formen Modul
• Überblick über CSS Formen
• Formpfade in CSS bearbeiten — Firefox Developer Tools