<basic-shape>

Der <basic-shape> Datentyp wird verwendet, um grundlegende Formen zu erstellen, einschließlich Rechtecken durch Containerabstände, durch Koordinatenabstände oder durch festgelegte Dimensionen, Kreise, Ellipsen, Polygone, Pfade und vom Autor erstellte Formen. Diese grundlegenden Formen werden mithilfe einer der <basic_shape> CSS-Funktionen definiert, wobei jeder Wert einen Parameter erfordert, der der funktionsspezifischen Syntax der Form folgt.

Die Parameter, die in der Syntax einiger grundlegender Formfunktionen gemeinsam sind, umfassen:

round <'border-radius'>

Definiert abgerundete Ecken für Rechtecke durch Containerabstände, Rechtecke durch Abstände und Rechtecke mit Dimensionen unter Verwendung derselben Syntax wie die CSS-border-radius Kurzschreibweise.

<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 closest-side Schlüsselwortwert verwendet die Länge vom Zentrum der Form zur nächstgelegenen Seite des Referenzrahmens, um die Länge des Radius zu bestimmen. Der farthest-side Schlüsselwortwert verwendet die Länge vom Zentrum der Form zur am weitesten entfernten Seite des Referenzrahmens.

<position>

Definiert die mittlere <position> eines Kreises oder einer Ellipse. Standardmäßig center, wenn ausgelassen.

<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 wird. Mögliche Werte sind nonzero (der Standard) und evenodd.

Hinweis: <fill-rule> wird in offset-path nicht unterstützt und macht die Eigenschaft ungültig, wenn es verwendet wird.

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

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

Wenn alle vier ersten Argumente angegeben werden, stellen sie die inneren Abstände von oben, rechts, unten und links von der Referenzbox dar, die die Position der Kanten des eingesetzten Rechtecks definieren. Diese Argumente folgen der Syntax der margin Kurzschreibweise, die es Ihnen ermöglicht, alle vier Einsätze mit einem, zwei, drei oder vier Werten festzulegen.

Wenn ein Paar von Einsätzen für eine 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%) durch einen oberen Einsatz von 90% und einen unteren Einsatz von 60% reduziert proportional zu inset(60% 10% 40% 10%). Solche Formen, die keinen Bereich einschließen und keinen shape-margin haben, beeinflussen das Umfließen nicht.

Die rect() Funktion definiert ein Rechteck unter Verwendung der angegebenen Abstände von den oberen und linken Kanten der Referenzbox, mit optional abgerundeten Ecken.

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

Bei 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 Dimensionen durch die Größe der Referenzbox und die vier Versatzwerte bestimmt werden. Jeder Wert kann entweder eine <length>, ein <percentage> oder das Schlüsselwort auto sein. Das auto Schlüsselwort wird als 0% für die oberen und linken Werte sowie als 100% für die unteren und rechten Werte interpretiert.

Die xywh() Funktion definiert ein Rechteck, das sich in den angegebenen Abständen von den linken (x) und oberen (y) Kanten der Referenzbox befindet und durch die angegebene Breite (w) und Höhe (h) des Rechtecks, in dieser Reihenfolge, mit optional abgerundeten Ecken, Größe erhält.

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 wird hier aus der verwendeten Breite und Höhe der Referenzbox als sqrt(width^2+height^2)/sqrt(2) aufgelöst. Wenn ausgelassen, wird der Radius durch closest-side definiert.

Die ellipse() Funktion definiert eine Ellipse unter Verwendung von zwei Radien und einer Position.

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

Die <shape-radius> Argumente repräsentieren rx und ry, die x-Achse und y-Achse Radien der Ellipse, in dieser Reihenfolge. Diese Werte werden entweder als <length> oder als <percentage> spezifiziert. Prozentwerte werden hier relativ zur verwendeten Breite (für den rx-Wert) und zur verwendeten Höhe (für den ry-Wert) der Referenzbox aufgelöst. Wenn nur ein Radiuswert angegeben wird, ist die ellipse() Formfunktion ungültig. Wenn kein Wert angegeben ist, 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 akzeptiert eine Liste von durch Kommas getrennten Koordinatenpaaren, von denen jedes aus zwei durch Leerzeichen getrennten <length-percentage> Werten als xi und yi Paar besteht. Diese Werte repräsentieren die x- und y-Achsen-Koordinaten des Polygons an Position i (dem Scheitelpunkt, 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> )

Das erforderliche <string> ist ein SVG-Pfad als String in Anführungszeichen. Die path() Funktion ist kein gültiger shape-outside Eigenschaftswert.

Die shape() Funktion definiert eine Form unter Verwendung eines initialen Ausgangspunkts und einer Reihe von Formbefehlen.

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

Der Parameter from <coordinate-pair> stellt den Ausgangspunkt für den ersten Formbefehl dar, und <shape-command> definiert einen oder mehrere Formbefehle, die den SVG-Pfadbefehlen ähneln. Die shape() Funktion ist kein gültiger shape-outside Eigenschaftswert.

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

Die Standardreferenzbox ist die margin-box, wie im folgenden Bild gezeigt. Das Bild zeigt einen Kreis, der unter Verwendung von shape-outside: circle(50%) erstellt wurde, und hebt die verschiedenen Teile des Boxmodells hervor, wie sie in den Entwicklertools eines Browsers zu sehen sind. Die Form hier wird mit Bezug zur margin-box definiert.

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

• Für alle weggelassenen Werte werden ihre Standardwerte verwendet.
• Ein <position> Wert in circle() oder ellipse() wird als Paar von Versätzen von der oberen linken Ecke der Referenzbox 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 erweitert, von denen jeder entweder eine <length> oder ein <percentage> ist.
• inset(), rect(), und xywh() Funktionen werden zu der entsprechenden inset() Funktion berechnet.

Beim Animieren zwischen zwei <basic-shape> Funktionen werden die nachstehenden Interpolationsregeln befolgt. Die Parameterwerte jeder <basic-shape> Funktion bilden eine Liste. Für die Interpolation zwischen zwei Formen müssen beide Formen dieselbe Referenzbox 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, wo möglich. Die Interpolation kann weiterhin erfolgen, wenn die Werte nicht zu diesen Datentypen gehören, aber zwischen den beiden interpolierenden grundlegenden Formfunktionen identisch sind, wie z.B. nonzero.

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

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

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

• Beide Formen sind vom Typ path(): Die Interpolation wird auf jeden Parameter als <number> angewendet, wenn die Pfadstrings in beiden Formen die gleiche Anzahl, den gleichen Typ und die gleiche Reihenfolge der Pfaddaten-Befehle haben.

• Beide Formen sind vom Typ shape(): Die Interpolation erfolgt zwischen jedem entsprechenden Wert, wenn sie dasselbe Befehls-Schlüsselwort und dasselbe <by-to> Schlüsselwort verwenden. Wenn shape() in der clip-path Eigenschaft verwendet wird, interpolieren die beiden Formen, wenn sie auch dieselbe <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 vom Typ shape(): Die Interpolation erfolgt zwischen jedem entsprechenden Wert, wenn die Liste der Pfaddaten-Befehle in Anzahl sowie Reihenfolge identisch ist. Die interpolierte Form ist eine shape() Funktion, die die gleiche Liste von Pfaddaten-Befehlen 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 Klipppfad zwischen zwei Polygonen zu animieren. Beachten Sie, dass beide Polygone die gleiche Anzahl an Ecken haben, was für das Funktionieren dieser Art der 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,
• CSS-Formen Modul
• Übersicht der CSS-Formen
• Bearbeiten von Formpfaden in CSS — Firefox DevTools