<basic-shape>

Der <basic-shape>-Datentyp wird verwendet, um grundlegende Formen zu erstellen, einschließlich Rechtecken durch Behälter-Einzüge, durch Koordinaten-Abstände oder durch festgelegte Abmessungen, Kreise, Ellipsen, Polygone, Pfade, und vom Autor erstellte Formen. Diese grundlegenden Formen werden mit einer von einem <basic_shape> CSS-Funktionen definiert, wobei jeder Wert einen Parameter erfordert, der der funktionsspezifischen Syntax der Form folgt.

Die syntaxgleichen Parameter einiger grundlegender Formfunktionen umfassen:

round <'border-radius'>

Definiert abgerundete Ecken für Rechtecke durch Behälter-Einzüge, Rechtecke durch Abstand und Rechtecke mit Abmessungen mit derselben Syntax wie die CSS- border-radius Kurzform-Eigenschaft.

<shape-radius>

Definiert den Radius für einen Kreis oder eine Ellipse. Gültige Werte umfassen <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ächstgelegenen Seite des Referenzbereichs, um die Radiuslänge zu erstellen. Der Schlüsselwortwert farthest-side verwendet die Länge vom Mittelpunkt der Form zur entferntesten Seite des Referenzbereichs.

<position>

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

<fill-rule>

Legt die fill-rule fest, die verwendet wird, um zu bestimmen, wie das Innere der durch die grundlegenden Formen Polygon, Pfad und Form definierten 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.

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

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

Wenn alle der ersten vier Argumente angegeben sind, repräsentieren sie die Versätze oben, rechts, unten und links von der Bezugsbox nach innen, die die Position der Kanten des Eingebetteten Rechtecks definieren. Diese Argumente folgen der Syntax der margin-Kurzform, die es Ihnen ermöglicht, alle vier Einzüge mit einem, zwei, drei oder vier Werten festzulegen.

Wenn ein Paar Einzüge für eine Dimension mehr als 100% dieser Dimension ausmachen, werden beide Werte proportional reduziert, sodass ihre Summe 100% ergibt. Zum Beispiel hat der Wert inset(90% 10% 60% 10%) einen oberen Einzug von 90% und einen unteren Einzug von 60%. Diese Werte werden proportional zu inset(60% 10% 40% 10%) reduziert. Solche Formen, die keinen Bereich einschließen und ohne shape-margin, beeinflussen das Umfließen nicht.

Die rect()-Funktion definiert ein Rechteck, indem sie die angegebenen Abstände von den oberen und linken Rändern der Bezugsbox mit optional abgerundeten Ecken verwendet.

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

Bei der Verwendung der rect()-Funktion definieren Sie nicht die Breite und Höhe des Rechtecks. Stattdessen geben Sie vier Werte an, um das Rechteck zu erstellen, wobei seine Abmessungen durch die Größe der Bezugsbox 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 an den angegebenen Abständen von den linken (x) und oberen (y) Rändern der Bezugsbox positioniert ist und mit der angegebenen Breite (w) und Höhe (h) des Rechtecks in dieser Reihenfolge dimensioniert wird, mit optional 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 stellt den Radius des Kreises dar, der entweder als <length> oder als <percentage> definiert ist. Ein Prozentwert hier wird von der verwendeten Breite und Höhe des Referenzbereichs als sqrt(width^2+height^2)/sqrt(2) aufgelöst. Wenn es weggelassen wird, wird der Radius durch closest-side definiert.

Die ellipse()-Funktion definiert eine Ellipse unter Verwendung zweier Radien und einer Position.

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

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

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

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

Die Funktion nimmt eine Liste von durch Kommas getrennten Koordinatenpaaren auf, die jeweils aus zwei leerzeichenseparierten <length-percentage>-Werten als das xi und yi Paar bestehen. Diese Werte repräsentieren die x- und y-Achsenkoordinaten des Polygons an der Position i (der Scheitelpunkt, an dem zwei Linien zusammentreffen).

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 unter Verwendung eines Anfangspunktes 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 ähneln. Die shape()-Funktion ist kein gültiger Wert für die shape-outside-Eigenschaft.

Beim Erstellen einer Form wird die Bezugsbox von der Eigenschaft definiert, die <basic-shape>-Werte verwendet. Das Koordinatensystem für die Form hat seinen Ursprung standardmäßig in der oberen linken Ecke des Randkastens des Elements mit der x-Achse, die nach rechts läuft, und der y-Achse, die nach unten verläuft. Alle in Prozent ausgedrückten Längen werden von den Abmessungen der Bezugsbox aufgelöst.

Die Standard-Bezugsbox ist die margin-box, wie im Bild unten gezeigt. Das Bild zeigt einen Kreis, der mit shape-outside: circle(50%) erstellt wurde und die verschiedenen Teile des Boxmodells, wie sie in den Entwicklertools eines Browsers zu sehen sind, hervorhebt. Die Form hier wird 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 weggelassenen Werte werden deren Standardwerte verwendet.
• Ein <position> Wert in circle() oder ellipse() wird als ein Paar Offsets von der oberen linken Ecke der Bezugsbox berechnet: das erste Offset ist horizontal und das zweite ist vertikal. Jedes Offset wird als ein <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 rechnen sich in die gleichwertige inset()-Funktion um.

Bei der Animation zwischen zwei <basic-shape>-Funktionen werden die unten aufgeführten Interpolations-Regeln befolgt. Die Parameterwerte jeder <basic-shape>-Funktion bilden eine Liste. Damit eine Interpolation zwischen zwei Formen stattfinden kann, müssen beide Formen dasselbe Bezugsbox verwenden und die Anzahl und Art der Werte in beiden <basic-shape>-Listen muss ü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, wo möglich. Eine Interpolation kann auch dann erfolgen, wenn die Werte nicht einer dieser Datentypen sind, aber zwischen den beiden interpolierenden Grundformfunktionen identisch sind, wie z.B. nonzero.

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

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

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

• Beide Formen sind vom Typ path(): Interpolation wird auf jeden Parameter als <number> angewendet, wenn die Pfadzeichenfolgen in beiden Formen die Anzahl, Typ und Abfolge der Pfaddatenbefehle übereinstimmen.

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

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

  • Wenn sie den <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 mithilfe des large-Werts interpoliert.

• Eine Form ist vom Typ path() und die andere vom Typ shape(): Interpolation wird zwischen jedem entsprechenden Wert angewendet, wenn die Liste der Pfaddatenbefehle in Anzahl sowie Abfolge identisch ist. Die interpolierte Form ist eine shape()-Funktion, die die gleiche Liste von Pfaddatenbefehlen 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 Ecken haben müssen, was für diese Art von Animation erforderlich 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
• SVG-Formelemente: <circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect>
• Überblick über CSS-Formen
• CSS-Formen Modul
• Einführung in CSS-Masking
• CSS-Masking Modul
• Bearbeiten von Formpfaden in Firefox-Entwicklertools