<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 Container-Inset, nach Koordinatenentfernung, oder nach festgelegten Dimensionen, Kreise, Ellipsen, Polygone, Pfade und autorenerschaffene Formen. Diese grundlegenden Formen werden mit einer <basic_shape> CSS Funktion definiert, wobei jeder Wert einen Parameter benötigt, der der speziell für die Funktion vorgesehenen Syntax der Form folgt.

Gemeinsame Parameter

Zu den Syntaxen einiger grundlegender Formen gehören folgende gemeinsame Parameter:

round <'border-radius'>

Definiert abgerundete Ecken für Rechtecke nach Container-Inset, Rechtecke nach Entfernung und Rechtecke mit Dimensionen, wobei die gleiche Syntax wie bei der CSS-border-radius-Kurzform verwendet wird.

<shape-radius>

Definiert den Radius für einen Kreis oder eine Ellipse. Gültige Werte umfassen <length>, <percentage>, closest-side (Standardwert), farthest-side, closest-corner und farthest-corner. Negative Werte sind ungültig.

Der Schlüsselwort-Wert closest-side verwendet die Länge vom Zentrum der Form zur nächsten Seite der Referenzbox, um die Radiuslänge zu erstellen. Der Schlüsselwert farthest-side verwendet die Länge vom Zentrum der Form zur am weitesten entfernten Seite der Referenzbox. Ebenso verwenden closest-corner und farthest-corner die Länge vom Zentrum der Form zu den nächsten bzw. am weitesten entfernten Ecken.

<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 Form, die durch die grundlegenden Formen Polygon, Pfad und Form definiert wird, ausgefüllt werden soll. Mögliche Werte sind nonzero (Standard) und evenodd.

Hinweis: <fill-rule> wird in offset-path nicht unterstützt und invalidiert die Eigenschaft bei Verwendung.

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

Der <basic-shape-rect> Typ, ein Subtyp des <basic-shape> Typs, repräsentiert die grundlegenden Formfunktionen, die auf die Erstellung von Rechtecken beschränkt sind, einschließlich inset(), rect() und xywh().

Die Funktionen polygon(), path() und shape() können ebenfalls zur Erstellung von Rechtecken verwendet werden, sind jedoch nicht auf nur vierseitige, rechtwinklige Formen beschränkt.

Syntax für Rechtecke nach Container-Insets

Die inset() Funktion erstellt ein Inset-Rechteck, dessen Größe durch die Versatzentfernung jeder der vier Seiten seines Containers und optional abgerundete Ecken definiert ist.

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

Wenn alle der ersten vier Argumente angegeben sind, repräsentieren sie die oberen, rechten, unteren und linken Versätze von der Referenzbox nach innen, die die Position der Kanten des Inset-Rechtecks definieren. Diese Argumente folgen der Syntax der margin-Kurzform, die es Ihnen ermöglicht, alle vier Insets mit einem, zwei, drei oder vier Werten festzulegen.

Wenn ein Paar von Einsätzen für eine Dimension mehr als 100% dieser Dimension addiert, werden beide Werte proportional reduziert, sodass ihre Summe 100% entspricht. Zum Beispiel hat der Wert inset(90% 10% 60% 10%) einen oberen Einsatz von 90% und einen unteren Einsatz von 60%. Diese Werte werden proportional auf inset(60% 10% 40% 10%) reduziert. Solche Formen, die keinen Bereich einschließen und kein shape-margin haben, beeinflussen das Umfließen nicht.

Syntax für Rechtecke nach Entfernung

Die rect() Funktion definiert ein Rechteck unter Verwendung der angegebenen Entfernungen von den oberen und linken Kanten der Referenzbox 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 der Referenzbox und die vier Versatzwerte bestimmt werden. Jeder Wert kann entweder eine <length>, ein <percentage> oder das Schlüsselwort auto sein. Das auto Schlüsselwort 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 xywh() Funktion definiert ein Rechteck, das sich an den angegebenen Entfernungen 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. Optional können abgerundete Ecken verwendet werden.

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, der entweder als <length> oder als <percentage> definiert ist. Ein Prozentsatz hier wird als sqrt(width^2+height^2)/sqrt(2) von der verwendeten Breite und Höhe der Referenzbox aufgelöst. 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-Achsen und y-Achsen Radien der Ellipse, in dieser Reihenfolge. Diese Werte werden entweder als <length> oder als <percentage> angegeben. Prozentsätze werden hier gegen die verwendete Breite (für den rx-Wert) und die verwendete 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 polygon() Funktion definiert ein Polygon unter Verwendung 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 der Position i (der 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 Pfaddefinition.

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

Der erforderliche <string> ist ein SVG-Pfad als Zeichenkette in Anführungszeichen. Die path()-Funktion ist keine gültige shape-outside-Eigenschaft.

Syntax für Formen

Die shape() Funktion definiert eine Form unter Verwendung eines anfänglichen Startpunkts und einer Serie 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 ähnlich sind. Die shape()-Funktion ist keine gültige 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 in der oberen linken Ecke der Margin-Box des Elements standardmäßig, wobei die x-Achse nach rechts und die y-Achse nach unten läuft. Alle in Prozent ausgedrückten Längen werden aus den Abmessungen der Referenzbox berechnet.

Die Standard-Referenzbox 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 verschiedenen Teile des Box-Modells hervor, wie sie in den Entwickler-Tools eines Browsers zu sehen sind. 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 weggelassenen Werte werden deren Standardwerte verwendet.
• Ein <position> Wert in circle() oder ellipse() wird als Paar von Versätzen von der oberen linken Ecke der Referenzbox berechnet: der erste Versatz ist horizontal, der zweite vertikal. Jeder Versatz wird als <length-percentage> Wert angegeben.
• Ein <border-radius> Wert in inset() wird in eine Liste von acht Werten expandiert, die jeweils entweder eine <length> oder ein <percentage> sind.
• 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 Interpolation Regeln befolgt. Die Parameterwerte jeder <basic-shape> Funktion bilden eine Liste. Für die Interpolation zwischen zwei Formen müssen beide Formen die gleiche Referenzbox 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 möglich. Die Interpolation kann weiterhin erfolgen, wenn die Werte nicht einer dieser Datentypen sind, aber zwischen den beiden interpolierenden Grundformfunktionen identisch sind, wie z. B. nonzero.

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

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

• Beide Formen sind vom Typ polygon(): Die Interpolation erfolgt zwischen jedem entsprechenden Wert, wenn sie die gleiche <fill-rule> verwenden und die gleiche Anzahl kommagetrennter Koordinatenpaare haben.

• Beide Formen sind vom Typ path(): Die Interpolation erfolgt für jeden Parameter als <number>, wenn die Pfadzeichenfolgen in beiden Formen in der Anzahl, dem Typ und der Reihenfolge der Pfaddatenbefehle übereinstimmen.

• Beide Formen sind vom Typ shape(): Die Interpolation erfolgt zwischen jedem entsprechenden Wert, wenn sie das gleiche Befehls-Schlüsselwort und das gleiche <by-to>-Schlüsselwort verwenden. Wenn shape() in der clip-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 passen.

  • Wenn sie den <arc-command> mit unterschiedlichen <arc-sweep> Richtungen verwenden, wird das interpolierte Ergebnis im Uhrzeigersinn (cw) verlaufen. 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(): Die Interpolation erfolgt zwischen jedem entsprechenden Wert, wenn die Liste der Pfaddatenbefehle in Anzahl und Reihenfolge identisch ist. Die interpolierte Form ist eine shape() 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 @keyframes Regel, um einen Clip-Pfad zwischen zwei Polygonen zu animieren. Beachten Sie, dass beide Polygone dieselbe Anzahl an Eckpunkten haben, was für diese Art der 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: 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-Masking
• CSS-Masking Modul
• Formpfade in den Firefox-Entwicklertools bearbeiten