<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 Grundformen zu erstellen, darunter Rechtecke nach Containereinzug, nach Abstandskoordinaten oder nach festgelegten Dimensionen, Kreise, Ellipsen, Polygone, Pfade und benutzerdefinierte Formen. Diese Grundformen werden mit einer der CSS <basic_shape>-Funktionen definiert, wobei jeder Wert einen Parameter erfordert, der der funktionsspezifischen Syntax der Form folgt.

Gemeinsame Parameter

Die Parameter, die in der Syntax einiger Grundform-Funktionen gemeinsam sind, umfassen:

round <'border-radius'>

Definiert abgerundete Ecken für Rechtecke nach Containereinzügen, 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 (der Standard) und farthest-side. Negative Werte sind ungültig.

Der closest-side Schlüsselwort-Wert verwendet die Länge vom Mittelpunkt der Form zur nächstgelegenen Seite des Referenzrahmens, um die Radiuslänge zu erstellen. Der farthest-side Schlüsselwort-Wert verwendet die Länge vom Mittelpunkt der Form zur entferntesten Seite des Referenzrahmens.

<position>

Definiert die Mitte <position> eines Kreises oder einer Ellipse. Standardmäßig wird center verwendet, wenn nicht angegeben.

<fill-rule>

Legt die fill-rule fest, die verwendet wird, um zu bestimmen, wie das Innere der durch die Grundformen definierten Polygon, Pfad und Form ausgefüllt werden soll. 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 er verwendet wird.

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

Der <basic-shape-rect> Typ, ein Untertyp des <basic-shape> Typs, repräsentiert die Grundform-Funktionen, die sich auf die Erstellung von Rechtecken beschränken, einschließlich inset(), rect() und xywh().

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

Syntax für Rechtecke nach Containereinzügen

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

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

Wenn alle ersten vier Argumente angegeben sind, repräsentieren sie die oberen, rechten, unteren und linken Offsets von der Bezugskiste nach innen, die die Position der Kanten des eingefügten Rechtecks definieren. Diese Argumente folgen der Syntax des margin-Kurzschreibens, das 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 addiert, 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. Solche Formen, die keinen Bereich umschließen und keinen shape-margin haben, beeinflussen das Umfließen nicht.

Syntax für Rechtecke nach Abstand

Die rect()-Funktion definiert ein Rechteck unter Verwendung der angegebenen Abstände von den oberen und linken Kanten des Referenzrahmens, 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 Dimensionen durch die Größe des Referenzrahmens und die vier Offset-Werte bestimmt werden. Jeder Wert kann entweder eine <length>, ein <percentage> oder das Schlüsselwort auto sein. Das Schlüsselwort auto wird für die oberen und linken Werte als 0% interpretiert und für die unteren und rechten Werte als 100%.

Syntax für Rechtecke mit Dimensionen

Die xywh()-Funktion definiert ein Rechteck, das sich an den angegebenen Abständen von den linken (x) und oberen (y) Kanten des Referenzrahmens befindet und durch die angegebene Breite (w) und Höhe (h) 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 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 entweder als eine <length> oder ein <percentage>. Ein Prozentwert wird hier aus der verwendeten Breite und Höhe des Referenzrahmens als sqrt(width^2+height^2)/sqrt(2) aufgelöst. Wenn er nicht angegeben ist, 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-Achsradien der Ellipse, in dieser Reihenfolge. Diese Werte werden entweder als eine <length> oder ein <percentage> angegeben. Prozentwerte werden hier in Bezug auf die verwendete Breite (für den rx-Wert) und die verwendete Höhe (für den ry-Wert) des Referenzrahmens aufgelöst. 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 nimmt eine Liste von kommagetrennten Koordinatenpaaren, wobei jedes Paar aus zwei leerzeichengetrennten <length-percentage>-Werten als xi und yi Paar besteht. 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 path()-Funktion 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 ein Zeichenfolgenliteral. Die path()-Funktion ist kein gültiger shape-outside Eigenschaftswert.

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># )

Das 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 shape-outside Eigenschaftswert.

Beschreibung

Beim Erstellen einer Form wird der Referenzrahmen 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 Randrahmen des Elements, wobei die x-Achse nach rechts und die y-Achse nach unten verläuft. Alle Längen, die in Prozent angegeben sind, werden aus den Abmessungen des Referenzrahmens aufgelöst.

Der Standardreferenzrahmen ist die margin-box, wie im folgenden Bild gezeigt. Das Bild zeigt einen Kreis, der mit shape-outside: circle(50%) erstellt wurde, und hebt die unterschiedlichen Teile des Boxmodells hervor, wie in den Entwicklertools eines Browsers zu sehen. Die Form hier ist 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 deren Standardwerte verwendet.
• Ein <position> Wert in circle() oder ellipse() wird als Paar von Offsets von der oberen linken Ecke des Referenzrahmens berechnet: der erste Offset ist horizontal und der zweite ist vertikal. Jeder Offset wird als <length-percentage> Wert angegeben.
• Ein <border-radius> Wert in inset() wird zu einer Liste von acht Werten ausgeweitet, die entweder eine <length> oder ein <percentage> sind.
• inset(), rect() und xywh() Funktionen werden zur äquivalenten inset() Funktion berechnet.

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 eine Interpolation zwischen zwei Formen stattfinden kann, müssen beide Formen denselben Referenzrahmen 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 dies möglich ist. Eine Interpolation kann weiterhin stattfinden, wenn die Werte nicht einer dieser Datentypen sind, aber zwischen den beiden interpolierenden Grundformfunktionen identisch sind, wie etwa nonzero.

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

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

• Beide Formen sind vom Typ polygon(): Die Interpolation wird zwischen jedem entsprechenden Wert angewendet, wenn sie dieselbe <fill-rule> verwenden und dieselbe Anzahl von kommagetrennten Koordinatenpaaren haben.

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

• Beide Formen sind vom Typ shape(): Die 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 den <curve-command> oder den <smooth-command> verwenden, muss die Anzahl der Steuerpunkte für die 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 unter Verwendung des large Werts interpoliert.

• Eine Form ist vom Typ path() und die andere ist vom Typ shape(): Die Interpolation wird zwischen jedem entsprechenden Wert angewendet, wenn die Liste der Pfaddatenkommandos in der Anzahl und auch in der Abfolge identisch ist. Die interpolierte Form ist eine shape() Funktion, die die gleiche Liste von Pfaddatenkommandos 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-Regel, um einen Clip-Pfad zwischen zwei Polygonen zu animieren. Beachten Sie, dass beide Polygone die gleiche Anzahl an Ecken haben müssen, 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: 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 CSS-Maskierung
• CSS-Maskierung Modul
• Formpfade in den Firefox-Entwicklertools bearbeiten