Der<basic-shape>CSSDatentyp repräsentiert eine Form, die in den Eigenschaftenclip-path,shape-outside undoffset-path verwendet wird.

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>  <div></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 Rechtecken durchBehälter-Einfügungen, durchKoordinaten-Distanz oder durchdefinierte Dimensionen,Kreise,Ellipsen,Polygone,Pfade undvom Autor erstellte Formen. Diese grundlegenden Formen werden mit einer<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 allgemein sind, beinhalten:

round <'border-radius'>

Definiert abgerundete Ecken fürRechtecke durch Behälter-Einfügungen,Rechtecke durch Distanz undRechtecke mit Dimensionen mit der gleichen Syntax wie die CSS-border-radius-Kurzschreibweise.

<shape-radius>

Definiert den Radius für einenKreis oder eineEllipse. Gültige Werte beinhalten<length>,<percentage>,closest-side (der Standard) undfarthest-side. Negative Werte sind ungültig.

Derclosest-side-Schlüsselwortwert verwendet die Länge vom Mittelpunkt der Form zur nächstgelegenen Seite des Bezugsrahmens, um die Radiuslänge zu erstellen. Derfarthest-side-Schlüsselwortwert verwendet die Länge vom Mittelpunkt der Form zur am weitesten entfernten Seite des Bezugsrahmens.

<position>

Definiert das Zentrum<position> einesKreises oder einerEllipse. Standardmäßig ist escenter, wenn es weggelassen wird.

<fill-rule>

Setzt die genutztefill-rule, um zu bestimmen, wie das Innere der durch die grundlegenden Formen definierten FormPolygon,Pfad undForm zu füllen ist. Mögliche Werte sindnonzero (der Standard) undevenodd.

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

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

Der Typ<basic-shape-rect>, ein Untertyp des<basic-shape>-Typs, repräsentiert die grundlegenden Formfunktionen, die auf die Erstellung von Rechtecken beschränkt sind, einschließlichinset(),rect() undxywh().

Die Funktionenpolygon(),path() undshape() können auch verwendet werden, um Rechtecke zu erstellen, sind jedoch nicht auf vierseitige, rechtwinklige Formen beschränkt.

Syntax für Rechtecke durch Behälter-Einfügungen

Die Funktioninset() erstellt ein eingefügtes Rechteck, dessen Größe durch die Versatzdistanz jeder der vier Seiten seines Behälters und, optional, abgerundete Ecken definiert wird.

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

Wenn alle der ersten vier Argumente geliefert werden, stellen sie den oberen, rechten, unteren und linken Versatz vom Bezugsrahmen nach innen dar, die die Position der Kanten des eingefügten Rechtecks definieren. Diese Argumente folgen der Syntax dermargin-Kurzschreibweise, 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 hat der Wertinset(90% 10% 60% 10%) eine obere Einfügung von90% und eine untere Einfügung von60%. Diese Werte werden proportional zuinset(60% 10% 40% 10%) reduziert. Formen dieser Art, die kein Gebiet einschließen und keinenshape-margin haben, beeinflussen das Umfließen nicht.

Syntax für Rechtecke durch Distanz

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

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

Beim Verwenden derrect()-Funktion definieren Sie nicht die Breite und Höhe des Rechtecks. Stattdessen spezifizieren Sie vier Werte, um das Rechteck zu erstellen, dessen Dimensionen durch die Größe des Bezugsrahmens und die vier Versatzwerte bestimmt werden. Jeder Wert kann entweder eine<length>, ein<percentage> oder das Schlüsselwortauto sein. Das Schlüsselwortauto wird als0% für die oberen und linken Werte und als100% für die unteren und rechten Werte interpretiert.

Syntax für Rechtecke mit Dimensionen

Die Funktionxywh() definiert ein Rechteck, das an den angegebenen Abständen von den linken (x) und oberen (y) Kanten des Bezugsrahmens lokalisiert ist 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 Funktioncircle() definiert einen Kreis unter Verwendung eines Radius und einer Position.

circle( <shape-radius>? [ at <position> ]? )

Das<shape-radius>-Argument repräsentiert den Radius des definierten Kreises entweder als<length> oder<percentage>. Ein Prozentwert hier wird aus der genutzten Breite und Höhe des Bezugsrahmens alssqrt(width^2+height^2)/sqrt(2) aufgelöst. Wird er weggelassen, wird der Radius durchclosest-side definiert.

Syntax für Ellipsen

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

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

Die<shape-radius>-Argumente repräsentierenrx undry, die x-Achse und y-Achse Radien der Ellipse in dieser Reihenfolge. Diese Werte sind entweder als<length> oder<percentage> angegeben. Prozentwerte hier werden gegen die genutzte Breite (für den rx-Wert) und die genutzte Höhe (für den ry-Wert) des Bezugsrahmens aufgelöst. Wird nur ein Radiuswert angegeben, ist dieellipse()-Formfunktion ungültig. Wird kein Wert angegeben, wird50% 50% verwendet.

Syntax für Polygone

Die Funktionpolygon() definiert ein Polygon unter Verwendung einer SVG-fill-rule und einer Reihe von Koordinaten.

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

Die Funktion nimmt eine Liste von durch Komma getrennten Koordinatenpaaren, wobei jedes aus zwei durch Leerzeichen getrennten<length-percentage>-Werten besteht, die dasxi undyi Paar darstellen. Diese Werte repräsentieren die x- und y-Achsen-Koordinaten des Polygons an Positioni (der Scheitelpunkt, an dem sich zwei Linien treffen).

Syntax für Pfade

Die Funktionpath() definiert eine Form unter Verwendung einer SVG-fill-rule und einer SVG-Pfaddefinition.

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

Der erforderliche<string> ist einSVG-Pfad als ein Zitatstring. Diepath()-Funktion ist kein gültiger Wert für dieshape-outside-Eigenschaft.

Syntax für Formen

Die Funktionshape() definiert eine Form unter Verwendung eines initialen Startpunkts und einer Reihe von Formbefehlen.

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

Derfrom <coordinate-pair>-Parameter repräsentiert den Startpunkt für den ersten Formbefehl, und<shape-command> definiert einen oder mehrere Formbefehle, die denSVG-Pfadbefehlen ähnlich sind. Dieshape()-Funktion ist kein gültiger Wert für dieshape-outside-Eigenschaft.

Beschreibung

Beim Erstellen einer Form wird der Bezugsrahmen 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 des Margin-Rahmens des Elements, wobei die x-Achse nach rechts und die y-Achse nach unten verläuft. Alle Längen, die in Prozent ausgedrückt sind, werden aus den Dimensionen des Bezugsrahmens aufgelöst.

Der Standard-Bezugsrahmen ist dermargin-box, wie im Bild unten gezeigt. Das Bild zeigt einen Kreis, der mitshape-outside: circle(50%) erstellt wurde, und hebt die verschiedenen Teile des Box-Modells hervor, wie sie in den Entwicklertools eines Browsers zu sehen sind. Die Form hier ist im Bezug auf den Margin-Box definiert.

Berechnete Werte von einfachen Formen

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

• Bei fehlenden Werten werden deren Standardwerte verwendet.
• Ein<position>-Wert incircle() oderellipse() wird als ein Paar von Versätzen von der oberen linken Ecke des Bezugsrahmens berechnet: der erste Versatz ist horizontal, und der zweite ist vertikal. Jeder Versatz wird als ein<length-percentage>-Wert angegeben.
• Ein<border-radius>-Wert ininset() wird in eine Liste von acht Werten erweitert, die jeweils entweder eine<length> oder ein<percentage> sind.
• inset(),rect(), undxywh()-Funktionen werden zur äquivalenteninset()-Funktion berechnet.

Interpolation von einfachen Formen

Beim Animieren zwischen zwei<basic-shape>-Funktionen werden die unten aufgeführtenInterpolationsregeln befolgt. Die Parameterwerte jeder<basic-shape>-Funktion bilden eine Liste. Damit eine Interpolation zwischen zwei Formen stattfinden kann, müssen beide Formen den gleichen Bezugsrahmen verwenden und die Anzahl und Art 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> odercalc() interpoliert, wo dies möglich ist. Eine Interpolation kann dennoch stattfinden, wenn die Werte nicht zu diesen Datentypen gehören, aber zwischen den beiden interpolierenden einfachen Formfunktionen identisch sind, wie z.B.nonzero.

• Beide Formen sind vom Typellipse() odercircle(): Die Interpolation wird zwischen jedem entsprechenden Wert angewendet, wenn ihre Radien entweder als<length> oder als<percentage> angegeben sind (statt Schlüsselwörtern wieclosest-side oderfarthest-side).

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

• Beide Formen sind vom Typpolygon(): Die Interpolation wird zwischen jedem entsprechenden Wert angewendet, wenn sie die gleiche<fill-rule>-Vorgabe verwenden und die gleiche Anzahl von durch Komma getrennten Koordinatenpaaren haben.

• Beide Formen sind vom Typpath(): Die Interpolation wird auf jeden Parameter als<number> angewendet, wenn die Pfadstrings in beiden Formen die Anzahl, den Typ und die Reihenfolge derPfaddatenbefehle übereinstimmen.

• Beide Formen sind vom Typshape(): Die Interpolation wird zwischen jedem entsprechenden Wert angewendet, wenn sie das identische Befehlschlüsselwort und das gleiche<by-to>-Schlüsselwort verwenden. Wennshape() in derclip-path-Eigenschaft verwendet wird, interpolieren die beiden Formen, wenn sie auch die gleiche<fill-rule> haben.

  • Wenn sie den<curve-command> oder den<smooth-command> verwenden, muss die Anzahl der Kontrollpunkte zur 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 mit dem Wertlarge interpoliert.

• Eine Form ist vom Typpath() und die andere ist vom Typshape(): Die Interpolation wird zwischen jedem entsprechenden Wert angewendet, wenn die Liste der Pfaddatenbefehle in der Anzahl sowie der Reihenfolge identisch ist. Die interpolierte Form ist eineshape()-Funktion, die die gleiche 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 At-Regel@keyframes, um einen Clippfad zwischen zwei Polygonen zu animieren. Beachten Sie, dass beide Polygone die gleiche Anzahl von 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%    );  }}

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>
• Übersicht über CSS-Formen
• CSS-Formen-Modul
• Einführung in CSS-Maskierung
• CSS-Maskierung-Modul
• Bearbeiten von Formpfaden in den Firefox-Entwicklertools