<basic-shape>

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-Einfügungen, nach Koordinatenabständen oder durch festgelegte Dimensionen, Kreise, Ellipsen, Polygone, Pfade und selbsterstellte 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.

Gemeinsame Parameter

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

round <'border-radius'>

Definiert abgerundete Ecken für Rechtecke durch Container-Einfügungen, Rechtecke nach Abständen und Rechtecke mit Dimensionen 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 (Standard) und farthest-side. Negative Werte sind ungültig.

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

<position>

Definiert das Zentrum <position> eines Kreises oder einer Ellipse. Es wird auf center gesetzt, 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 definierten Form Polygon, Pfad und 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 <basic-shape-rect> Typ, ein Unterset des <basic-shape> Typs, repräsentiert die grundlegenden Formfunktionen, die sich auf die Erstellung von Rechtecken beschränken, 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 ausschließlich viereckige, rechtwinklige Formen beschränkt.

Syntax für Rechtecke durch Container-Einfügungen

Die Funktion inset() erstellt ein eingefügtes Rechteck, dessen Größe durch die Abstandsdistanz 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 Abstände von der Referenzbox nach innen, die die Position der Kanten des eingefügten Rechtecks definieren. Diese Argumente folgen der Syntax der margin Kurzform, die es Ihnen ermöglicht, alle vier Einfügungen mit einem, zwei, drei oder vier Werten festzulegen.

Wenn ein Paar von Einfügungen für eine Dimension mehr als 100% dieser Dimension ausmacht, werden beide Werte proportional so reduziert, dass ihre Summe 100% ergibt. Beispielsweise wird der Wert inset(90% 10% 60% 10%) mit einem oberen Abstand von 90% und einem unteren Abstand von 60% proportionell zu inset(60% 10% 40% 10%) reduziert. Solche Formen, die keinen Bereich einschließen und keinen shape-margin haben, beeinflussen das Umfließen nicht.

Syntax für Rechtecke nach Abständen

Die Funktion rect() definiert ein Rechteck mithilfe 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 spezifizieren Sie vier Werte, um das Rechteck zu erstellen, wobei seine Dimensionen durch die Größe der Referenzbox und die vier Offset-Werte bestimmt werden. Jeder Wert kann entweder eine <length>, eine <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 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 dimensioniert ist, 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 mithilfe 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 Prozentsatzswert wird hier aus der verwendeten Breite und Höhe der Referenzbox als sqrt(width^2+height^2)/sqrt(2) aufgelöst. Wenn weggelassen, wird der Radius durch closest-side definiert.

Syntax für Ellipsen

Die Funktion ellipse() definiert eine Ellipse mithilfe zweier Radien und einer Position.

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

Die <shape-radius> Argumente repräsentieren rx und ry, die x-Achsen- und y-Achsenradien der Ellipse, in dieser Reihenfolge. Diese Werte werden entweder als <length> oder <percentage> angegeben. Prozentsatzswerte werden hier aus der verwendeten Breite (für den rx-Wert) und der 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 wird, wird 50% 50% verwendet.

Syntax für Polygone

Die Funktion polygon() definiert ein Polygon mithilfe einer SVG fill-rule und eines Satzes von Koordinaten.

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

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

Syntax für Pfade

Die Funktion path() definiert eine Form mithilfe 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.

Syntax für Formen

Die Funktion shape() definiert eine Form mithilfe eines anfänglichen 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 einen oder mehrere Formbefehle, die den SVG-Pfadbefehlen ähneln. Die shape() Funktion ist kein gültiger Wert für die shape-outside Eigenschaft.

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 Dimensionen der Referenzbox aufgelöst.

Die Standardreferenzbox 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 darstellt, wie sie in den Entwicklerwerkzeugen eines Browsers gesehen werden. Die Form hier wird in Bezug auf die Margin-Box definiert.

Berechnete Werte grundlegender Formen

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

• Für alle ausgelassenen Werte werden ihre Standardwerte verwendet.
• Ein <position> Wert in circle() oder ellipse() wird als ein Paar von Abständen von der oberen linken Ecke der Referenzbox berechnet: der erste Abstand ist horizontal, der zweite vertikal. Jeder Abstand wird als <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 eine <percentage> ist.
• inset(), rect(), und xywh() Funktionen berechnen sich in die äquivalente inset() Funktion.

Interpolation von grundlegenden Formen

Wenn zwischen zwei <basic-shape> Funktionen animiert wird, werden die unten aufgeführten Interpolations- Regeln befolgt. Die Parameterwerte jeder <basic-shape> Funktion bilden eine Liste. Damit eine Interpolation zwischen zwei Formen erfolgt, 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 zwei <basic-shape> Funktionen wird basierend auf seinem berechneten Wert als <number>, <length>, <percentage>, <angle>, oder calc() interpoliert, wo immer dies möglich ist. Interpolation kann weiterhin erfolgen, wenn die Werte nicht einer dieser Datentypen sind, aber zwischen den beiden interpolierenden Grundformen identisch sind, wie z. B. nonzero.

• Beide Formen sind vom Typ ellipse() oder Typ circle(): Interpolation wird zwischen jedem entsprechenden Wert angewendet, 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(): 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 die gleiche Anzahl an kommagetrennten Koordinatenpaaren aufweisen.

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

• 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 sich die beiden Formen ebenfalls, wenn sie dieselbe <fill-rule> aufweisen.

  • 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, wird das interpolierte Ergebnis im Uhrzeigersinn (cw) ausgeführt. Wenn sie unterschiedliche <arc-size> Schlüsselwörter verwenden, wird die Größe mit dem Wert large 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 Abfolge identisch ist. Die interpolierte Form ist eine shape() Funktion, die dieselbe Liste von Pfaddatenbefehlen beibehält.

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

Beispiele

Animiertes Polygon

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 an Scheitelpunkten haben, 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%
    );
  }
}

Resultat

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 die CSS-Masking
• CSS-Masking Modul
• Bearbeiten von Formpfaden in den Firefox Developer Tools