<basic-shape> CSS-Typ

Probieren Sie es aus

clip-path: inset(22% 12% 15px 35px);

clip-path: circle(6rem at 12rem 8rem);

clip-path: ellipse(115px 55px at 50% 40%);

clip-path: polygon(
  50% 2.4%,
  34.5% 33.8%,
  0% 38.8%,
  25% 63.1%,
  19.1% 97.6%,
  50% 81.3%,
  80.9% 97.6%,
  75% 63.1%,
  100% 38.8%,
  65.5% 33.8%
);

clip-path: path("M 50,245 A 160,160 0,0,1 360,120 z");

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#default-example {
  background: #ffee99;
}

#example-element {
  background: linear-gradient(to bottom right, #ff5522, #0055ff);
  width: 100%;
  height: 100%;
}

Syntax

Der <basic-shape>-Datentyp wird verwendet, um grundlegende Formen zu erstellen, einschließlich Rechtecke nach Behälter-Einzug, nach Koordinatenabstand oder nach festgelegten Dimensionen, Kreise, Ellipsen, Polygone, Pfade, und vormals erstellte Formen. Diese grundlegenden Formen werden mit einer <basic_shape>-CSS-Funktion definiert, wobei jeder Wert einen Parameter erfordert, der der funktionsspezifischen Syntax der Form folgt.

Allgemeine Parameter

Zu den Parametern, die in der Syntax einiger grundlegender Formfunktionen üblich sind, gehören:

round <'border-radius'>

Definiert abgerundete Ecken für Rechtecke nach Behälter-Einzug, Rechtecke nach Abstand 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 umfassen <length>, <percentage>, closest-side (Standard), farthest-side, closest-corner und farthest-corner. Negative Werte sind ungültig.

Der Schlüsselwortwert closest-side verwendet die Länge vom Zentrum der Form zur nächsten Seite der Referenzbox, um die Radiuslänge zu erzeugen. Der Schlüsselwert farthest-side verwendet die Länge vom Zentrum der Form zur weitesten Seite der Referenzbox. Ebenso verwenden closest-corner und farthest-corner die Länge vom Zentrum der Form zur nächsten bzw. weitesten Ecke.

<position>

Definiert das Zentrum <position> eines Kreises oder einer Ellipse. Es wird, wenn ausgelassen, standardmäßig auf center gesetzt.

<fill-rule>

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

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

Syntax für Rechtecke: <basic-shape-rect>

Der Typ <basic-shape-rect>, ein Untertyp des <basic-shape>-Typs, stellt die Grundform-Funktionen dar, die auf die Erstellung von Rechtecken beschränkt sind, einschließlich inset(), rect() und xywh().

Die Funktionen polygon(), path() und shape() können auch zum Erstellen von Rechtecken verwendet werden, sind jedoch nicht auf rein vierseitige, rechtwinklige Formen beschränkt.

Syntax für Rechtecke nach Behälter-Einzug

Die Funktion inset() erzeugt ein eingefügtes Rechteck, dessen Größe durch den Versatzabstand jeder der vier Seiten seines Behälters und gegebenenfalls abgerundete Ecken definiert wird.

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

Wenn alle der ersten vier Argumente angegeben sind, stellen diese die oberen, rechten, unteren und linken Versätze vom Referenzrahmen nach innen dar, die die Position der Kanten des eingefügten Rechtecks definieren. Diese Argumente folgen der Syntax der margin-Kurzschreibweise, die es ermöglicht, alle vier Einzüge mit einem, zwei, drei oder vier Werten festzulegen.

Wenn ein Paar von Einzügen für eine Dimension mehr als 100 % dieser Dimension beträgt, werden beide Werte proportional reduziert, sodass ihre Summe 100 % ergibt. Beispielsweise hat der Wert inset(90% 10% 60% 10%) einen oberen Einzug von 90% und einen unteren Einzug von 60%. Diese Werte werden proportional auf inset(60% 10% 40% 10%) reduziert. Formen wie diese, die kein Gebiet einschließen und keine shape-margin haben, beeinflussen das Umfließen nicht.

Syntax für Rechtecke nach Abstand

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

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

Beim Verwenden der rect()-Funktion definieren Sie nicht die Breite und Höhe des Rechtecks. Stattdessen spezifizieren Sie vier Werte zum Erstellen des Rechtecks, wobei seine Abmessungen 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 Schlüsselwort auto wird als 0% für die oberen und linken Werte und als 100% für die unteren und rechten Werte interpretiert.

Syntax für Rechtecke mit Dimensionen

Die Funktion xywh() definiert ein Rechteck, das an den angegebenen Abständen von den linken (x) und oberen (y) Kanten der Referenzbox positioniert ist und mit den angegebenen Breiten- (w) und Höhen- (h) Werten des Rechtecks dimensioniert ist, in dieser Reihenfolge, mit optional abgerundeten Ecken.

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

Syntax für Kreise

Die Funktion circle() definiert einen Kreis mit einem 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) berechnet. Wird er ausgelassen, wird der Radius durch closest-side definiert.

Syntax für Ellipsen

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

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

Die <shape-radius>-Argumente repräsentieren rx und ry, die x-Achsen- und y-Achsen-Radien der Ellipse, in dieser Reihenfolge. Diese Werte werden 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) der Referenzbox berechnet. Wird nur ein Radiuswert angegeben, ist die ellipse()-Formfunktion ungültig. Werden keine Werte angegeben, wird 50% 50% verwendet.

Syntax für Polygone

Die Funktion polygon() definiert ein Polygon mit einem Satz von durch Kommas getrennten Koordinatenpaaren, optional vorangestellt durch eine SVG-fill-rule, einen Eckabrundungsparameter oder beides.

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

Der optionale erste Parameter kann einen oder beide der folgenden Punkte enthalten, getrennt durch ein Leerzeichen:

• Ein SVG-fill-rule-Wert, entweder nonzero oder evenodd, der den Algorithmus angibt, der zum Füllen der Polygonform verwendet wird.
• Das Schlüsselwort round, gefolgt von einem <length>-Wert, getrennt durch ein Leerzeichen. Dies gibt an, dass das Polygon abgerundete Ecken haben soll, wobei das <length> den Eckenradius angibt.

Jedes Koordinatenpaar besteht aus zwei durch Leerzeichen getrennten <length-percentage>-Werten. Diese Werte repräsentieren die x-Achsen- und y-Achsen-Koordinaten eines Polygon-Wendepunkts.

Syntax für Pfade

Die Funktion path() 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 Zeichenfolgen. Die path()-Funktion ist kein gültiger Wert für die Eigenschaft shape-outside.

Syntax für Formen

Die Funktion shape() definiert eine Form unter Verwendung eines Anfangspunktes und einer Reihe von Formkommandos.

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

Der Parameter from <coordinate-pair> repräsentiert den Ausgangspunkt für das erste Formkommando, und <shape-command> definiert ein oder mehrere Formkommandos, die den SVG-Pfadkommandos ähneln. Die shape()-Funktion ist kein gültiger Wert für die Eigenschaft shape-outside.

Beschreibung

Beim Erstellen einer Form wird die Referenzbox 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 ausgedrückten Längen werden aus den Abmessungen der Referenzbox bestimmt.

Die Standard-Referenzbox ist die margin-box, wie im Bild unten gezeigt. Das Bild zeigt einen Kreis, der mit shape-outside: circle(50%) erstellt wurde, und hebt die verschiedenen Teile des Boxmodells hervor, wie sie in den Entwickler-Tools eines Browsers zu sehen sind. Die Form hier wird in Bezug auf die Margin-Box definiert.

Berechnete Werte von Grundformen

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

• Für alle ausgelassenen Werte werden die Standardwerte verwendet.
• Ein <position>-Wert in circle() oder ellipse() wird als ein 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, die jeweils entweder eine <length> oder ein <percentage> sind.
• inset(), rect() und xywh()-Funktionen werden zu einer äquivalenten inset()-Funktion berechnet.

Interpolation von Grundformen

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 die Interpolation zwischen zwei Formen stattfinden kann, müssen beide Formen dieselbe Referenzbox verwenden und die Anzahl und der Typ der Werte in beiden <basic-shape>-Listen ü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 dies möglich ist. Die Interpolation kann dennoch erfolgen, wenn die Werte nicht einer dieser Datentypen sind, aber zwischen den beiden interpolierenden Grundform-Funktionen identisch sind, wie z.B. nonzero.

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

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

• Beide Formen sind vom Typ polygon(): Interpolation wird auf jeden entsprechenden Wert angewendet, wenn sie dieselbe <fill-rule> verwenden und die gleiche Anzahl von Komma-getrennten Koordinatenpaaren haben.

• Beide Formen sind vom Typ path(): Interpolation wird auf jeden Parameter als ein <number> angewendet, wenn die Pfadstrings in beiden Formen die gleiche Anzahl, den gleichen Typ und die gleiche Sequenz von Pfaddatenkommandos haben.

• Beide Formen sind vom Typ shape(): Interpolation wird auf jeden entsprechenden Wert angewendet, wenn sie das identische Befehls-Schlüsselwort verwenden und dasselbe <by-to>-Schlüsselwort nutzen. Wenn shape() in der Eigenschaft clip-path verwendet wird, interpolieren die beiden Formen, wenn sie auch dasselbe <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, läuft das interpolierte Ergebnis im Uhrzeigersinn (cw). Wenn sie unterschiedliche <arc-size>-Schlüsselwörter verwenden, wird die Größe mit dem large-Wert interpoliert.

• Eine Form ist vom Typ path() und die andere Form ist vom Typ shape(): Interpolation wird auf jeden entsprechenden Wert angewendet, wenn die Liste der Pfaddatenkommandos in Anzahl und Sequenz übereinstimmt. Die interpolierte Form ist eine shape()-Funktion, die dieselbe Liste von Pfaddatenkommandos beibehält.

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

Beispiele

Animiertes Polygon

In diesem Beispiel verwenden wir die Regel @keyframes, um einen Clip-Pfad zwischen zwei Polygonen zu animieren. Beachten Sie, dass beide Polygone die gleiche Anzahl von Eckpunkten haben müssen, damit diese Art der Animation funktioniert.

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

• Eigenschaften, die diesen Datentyp verwenden: border-shape, clip-path, offset-path, shape-outside
• SVG-Formelemente: <circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect>
• Übersicht über CSS-Formen
• CSS-Formen Modul
• Einführung in das CSS-Maskieren
• CSS-Maskieren Modul
• Formpfade in Firefox-Entwicklertools bearbeiten