<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 durch Container-Einzug, durch Koordinatenabstand oder durch festgelegte Abmessungen, 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 spezifischen Syntax der Formfunktion folgt.

Gemeinsame Parameter

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

round <'border-radius'>

Definiert abgerundete Ecken für Rechtecke durch Container-Einzüge, Rechtecke durch Abstände und Rechtecke mit Abmessungen unter Verwendung 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 (Standard) und farthest-side. Negative Werte sind ungültig.

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

<position>

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

<fill-rule>

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

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

Der <basic-shape-rect> Typ, ein Untertyp des <basic-shape> Typs, repräsentiert die auf Rechteckerstellung begrenzten Grundformfunktionen, einschließlich inset(), rect(), und xywh().

Die Funktionen polygon(), path() und shape() können ebenfalls verwendet werden, um Rechtecke zu erstellen, sind jedoch nicht auf nur vierseitige, rechtwinklige Formen beschränkt.

Syntax für Rechtecke durch Container-Einzüge

Die Funktion inset() erstellt ein eingekapseltes 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 der ersten vier Argumente angegeben werden, repräsentieren sie die oberen, rechten, unteren und linken Versätze vom Referenzkasten nach innen, die die Position der Kanten des eingekapselten 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 von Einzügen für eine Dimension mehr als 100% dieser Dimension ausmacht, werden beide Werte proportional reduziert, sodass ihre Summe 100% beträgt. 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. Solche Formen, die keinen Bereich einschließen und keine shape-margin haben, beeinflussen das Umfließen nicht.

Syntax für Rechtecke durch Abstände

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

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

Wenn Sie die rect() Funktion verwenden, 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 des Referenzkastens 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 Abmessungen

Die xywh() Funktion definiert ein Rechteck, das sich in den angegebenen Abständen von den linken (x) und oberen (y) Kanten des Referenzkastens befindet und durch die angegebene 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'> ]? )

Syntax für Kreise

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 als entweder eine <length> oder ein <percentage>. Ein Prozentwert wird hier aus der benutzten Breite und Höhe des Referenzkastens wie sqrt(width^2+height^2)/sqrt(2) ermittelt. Wenn weggelassen, wird der Radius durch closest-side definiert.

Syntax für Ellipsen

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- und y-Achsen-Radien der Ellipse, in dieser Reihenfolge. Diese Werte werden angegeben als entweder eine <length> oder ein <percentage>. Prozentwerte werden hier gegen die benutzte Breite (für den rx-Wert) und die benutzte Höhe (für den ry-Wert) des Referenzkastens ermittelt. Wenn nur ein Radiuswert angegeben wird, ist die ellipse() Formfunktion ungültig. Wenn kein Wert angegeben ist, wird 50% 50% verwendet.

Syntax für Polygone

Die polygon() Funktion definiert ein Polygon unter Verwendung einer SVG fill-rule und einer Menge 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 das xi und yi Paar besteht. Diese Werte repräsentieren die x- und y-Achsen-Koordinaten des Polygons an der Position i (dem Scheitelpunkt, an dem zwei Linien sich treffen).

Syntax für Pfade

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

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

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

Syntax für Formen

Die shape() Funktion definiert eine Form unter Verwendung eines initialen Startpunkts 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 ein oder mehrere Formbefehle, die ähnlich den SVG Pfadbefehlen sind. Die shape() Funktion ist kein gültiger Wert für die shape-outside Eigenschaft.

Beschreibung

Beim Erstellen einer Form wird der Referenzkasten durch die Eigenschaft definiert, die <basic-shape> Werte verwendet. Das Koordinatensystem für die Form hat seinen Ursprung standardmäßig an der oberen linken Ecke des Randkastens des Elements, mit der x-Achse nach rechts und der y-Achse nach unten. Alle in Prozent ausgedrückten Längen werden aus den Dimensionen des Referenzkastens ermittelt.

Der Standard-Referenzkasten ist die margin-box, wie im untenstehenden Bild demonstriert. Das Bild zeigt einen Kreisbogen erstellt durch shape-outside: circle(50%) und hebt die unterschiedlichen Teile des Box-Modells, wie sie in den Developer Tools eines Browsers gesehen werden, hervor. Die Form wird hier 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 weggelassenen Werte werden ihre Standardwerte verwendet.
• Ein <position> Wert in circle() oder ellipse() wird als ein Paar von Versätzen von der oberen linken Ecke des Referenzkastens berechnet: der erste Versatz ist horizontal, und der zweite ist vertikal. Jeder Versatz wird als ein <length-percentage> Wert angegeben.
• Ein <border-radius> Wert in inset() wird in eine Liste von acht Werten expandiert, von denen jeder entweder eine <length> oder ein <percentage> ist.
• inset(), rect(), und xywh() Funktionen berechnen sich zur äquivalenten inset() Funktion.

Interpolation von Grundformen

Beim Animieren zwischen zwei <basic-shape> Funktionen werden die unten aufgeführten Interpolationsregeln befolgt. Die Parameterwerte jeder <basic-shape> Funktion bilden eine Liste. Damit Interpolation zwischen zwei Formen stattfindet, müssen beide Formen denselben Referenzkasten 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 entweder als <number>, <length>, <percentage>, <angle>, oder calc() interpoliert, wo möglich. Interpolation kann dennoch stattfinden, wenn die Werte nicht eine dieser Datentypen sind, aber identisch zwischen den beiden interpolierenden Grundformfunktionen sind, wie nonzero.

• Beide Formen sind vom Typ ellipse() oder vom Typ circle(): Interpolation wird zwischen jedem entsprechenden Wert angewendet, wenn ihre Radien entweder als eine <length> oder ein <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 dieselbe <fill-rule> verwenden und dieselbe Anzahl von durch Komma getrennten Koordinatenpaaren haben.

• Beide Formen sind vom Typ path(): Interpolation wird zu jedem Parameter als ein <number> angewendet, wenn die Pfadstrings in beiden Formen die Anzahl, den Typ und die Reihenfolge der Pfaddatenbefehle entsprechen.

• Beide Formen sind vom Typ shape(): Interpolation wird zwischen jedem entsprechenden Wert angewendet, 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 mit dem large Wert interpoliert.

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

In allen anderen Fällen findet keine Interpolation statt, und die Animation ist diskret.

Beispiele

Animiertes Polygon

In diesem Beispiel verwenden wir die @keyframes at-rule, um einen Clip-Pfad zwischen zwei Polygonen zu animieren. Beachten Sie, dass beide Polygone dieselbe Anzahl von Scheitelpunkten haben, was notwendig ist, damit diese Art von 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: 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 Maskierung
• CSS Maskierung Modul
• Bearbeiten von Form-Pfaden in den Firefox Developer Tools