shape()

<fill-rule> Optional

Gibt an, wie sich überschneidende Regionen einer Form gefüllt werden sollen. Die möglichen Werte sind:

• nonzero: Ein Punkt wird als innerhalb der Form betrachtet, wenn ein Strahl, der vom Punkt gezogen wird, mehr von links nach rechts als von rechts nach links verlaufende Pfadsegmente kreuzt, was zu einer ungleichmäßigen Anzahl führt. Dies ist der Standardwert, wenn <fill-rule> weggelassen wird.

• evenodd: Ein Punkt wird als innerhalb der Form betrachtet, wenn ein Strahl, der vom Punkt gezogen wird, eine ungerade Anzahl von Pfadsegmenten kreuzt. Das bedeutet, dass der Strahl für jede Betretung der Form nicht eine gleiche Anzahl von Austritten aufweist, was eine ungerade Anzahl von Eintritten ohne entsprechende Austritte anzeigt.

Warning: <fill-rule> wird in offset-path nicht unterstützt und die Verwendung macht die Eigenschaft ungültig.

from <coordinate-pair>

Definiert den Startpunkt des ersten <shape-command> als ein Koordinatenpaar, das vom oberen linken Eckpunkt der Referenzbox gemessen wird. Die Koordinaten werden als durch Leerzeichen getrennte <x> <y> <length-percentage>-Werte angegeben, die den linken Offset bzw. oberen Offset darstellen. Prozentwerte sind relativ zur Breite bzw. Höhe der Referenzbox des Elements. Fügen Sie nach diesem Parameter ein Komma hinzu.

<shape-command>

Gibt eine Liste von einem oder mehreren durch Kommas getrennten Befehlen an, die die Form definieren. Die Syntax ähnelt dabei den SVG-Pfadbefehlen. Befehle umfassen <move-command>, <line-command>, <hv-line-command>, <curve-command>, <smooth-command>, <arc-command> und close. Jeder Befehl beginnt mit dem Endpunkt des vorherigen Befehls, wobei der erste Punkt der Form durch den Parameter from <coordinate-pair> definiert wird.

Die Syntax der meisten Formbefehle besteht aus einem Schlüsselwort, das eine Anweisung bietet, wie move oder line, gefolgt von den Schlüsselwörtern by oder to und einem Satz von Koordinaten.

by: Gibt an, dass das <coordinate-pair> relativ zum Startpunkt des Befehls ist (ein "relativer" Wert).

to: Gibt an, dass das <coordinate-pair> relativ zum oberen linken Eckpunkt der Referenzbox ist (ein "absoluter" Wert).

Hinweis: Wenn eine Koordinate in einem <coordinate-pair> als Prozentwert angegeben ist, wird der Wert relativ zur jeweiligen Breite oder Höhe der Referenzbox berechnet.

Folgende <shape-command>s können angegeben werden: <move-command>, <line-command>, <hv-line-command>, <curve-command>, <smooth-command>, <arc-command>, und close.

<move-command>: Angegeben als move [by | to] <coordinate-pair>. Dieser Befehl fügt der Liste der Formbefehle einen MoveTo-Befehl hinzu. Er zeichnet nichts, sondern gibt die Startposition für den nächsten Befehl an. Das by oder to Schlüsselwort gibt an, ob der <coordinate-pair>-Punkt relativ oder absolut ist. Wenn das <move-command> dem close-Befehl folgt, identifiziert es den Startpunkt der nächsten Form oder Teilpfad.

<line-command>: Angegeben als line [by | to] <coordinate-pair>. Dieser Befehl fügt der Liste der Formbefehle einen LineTo-Befehl hinzu. Er zeichnet eine gerade Linie vom Startpunkt des Befehls zum Endpunkt. Das by oder to Schlüsselwort gibt an, ob der Endpunkt, der durch <coordinate-pair> angegeben wird, relativ oder absolut ist.

<hv-line-command>: Angegeben als [hline | vline] [by | to] <length-percentage>. Dieser Befehl fügt der Liste der Formbefehle einen horizontalen (hline) oder vertikalen (vline) LineTo-Befehl hinzu. Mit hline wird eine horizontale Linie vom Startpunkt des Befehls to oder by zur x-Position gezeichnet, die durch <length-percentage> definiert ist. Mit vline wird eine vertikale Linie vom Startpunkt des Befehls to oder by zur y-Position gezeichnet, die durch <length-percentage> definiert ist. Das by oder to Schlüsselwort bestimmt den relativen oder absoluten Endpunkt, jeweils. Dieser Befehl ist das Äquivalent zu <line-command>, bei dem ein Koordinatenwert durch den einzelnen <length-percentage> festgelegt wird und der andere Koordinatenwert unverändert bleibt.

<curve-command>: Angegeben als curve [by | to] <coordinate-pair> via <coordinate-pair> [<coordinate-pair>]. Dieser Befehl fügt der Liste der Formbefehle einen Bézierkurven-Befehl hinzu. Das by oder to Schlüsselwort bestimmt, ob der Endpunkt der Kurve, der durch das erste <coordinate-pair> angegeben wird, relativ oder absolut ist. Das via Schlüsselwort spezifiziert die Kontrollpunkte der Bézierkurve.

• Wenn nur ein einzelnes <coordinate-pair> angegeben wird, zeichnet der Befehl eine quadratische Bézierkurve, die durch drei Punkte (den Startpunkt, den Kontrollpunkt, und den Endpunkt) definiert ist.
• Wenn zwei <coordinate-pair> Werte angegeben werden, zeichnet der Befehl eine kubische Bézierkurve, die durch vier Punkte (den Startpunkt, zwei Kontrollpunkte und den Endpunkt) definiert ist.

<smooth-command>: Angegeben als smooth [by | to] <coordinate-pair> [via <coordinate-pair>]. Dieser Befehl fügt der Liste der Formbefehle eine glatte Bézierkurven-Anweisung hinzu. Das by oder to Schlüsselwort bestimmt, ob der Endpunkt der Kurve, der durch das erste <coordinate-pair> angegeben wird, relativ oder absolut ist.

• Wenn via <coordinate-pair> weggelassen wird, zeichnet der Befehl eine glatte quadratische Bézierkurve, die den vorherigen Kontrollpunkt und den aktuellen Endpunkt zur Definition der Kurve verwendet.
• Wenn das optionale via Schlüsselwort enthalten ist, spezifiziert es die Kontrollpunkte der Kurve über <coordinate-pair>, wodurch eine glatte kubische Bézierkurve definiert wird, die den vorherigen Kontrollpunkt, den aktuellen Kontrollpunkt und den aktuellen Endpunkt umfasst.

Glatte Kurven sorgen für einen kontinuierlichen Übergang von der Form, während quadratische Kurven das nicht tun. Glatte quadratische Kurven gewährleisten einen nahtlosen Übergang mit einem einzigen Kontrollpunkt, während glatte kubische Kurven einen verfeinerten Übergang mit zwei Kontrollpunkten bieten.

<arc-command>: Angegeben als arc [by | to] <coordinate-pair> of <length-percentage> [<length-percentage>] [<arc-sweep> | <arc-size> | rotate <angle>]. Dieser Befehl fügt der Liste der Formbefehle eine elliptische Bogenkurven-Anweisung hinzu. Er zeichnet einen elliptischen Bogen zwischen einem Startpunkt und einem Endpunkt. Das by oder to Schlüsselwort bestimmt, ob der Endpunkt der Kurve, der durch das erste <coordinate-pair> angegeben wird, relativ oder absolut ist.

Der elliptische Bogenkurven-Befehl definiert zwei mögliche Ellipsen, die sowohl den Start- als auch den Endpunkt schneiden und jeweils im Uhrzeigersinn oder gegen den Uhrzeigersinn verfolgt werden können, was zu vier möglichen Bögen abhängig von der Bogengröße, Richtung und dem Winkel führt. Das of Schlüsselwort spezifiziert die Größe der Ellipse, aus der der Bogen genommen wird: das erste <length-percentage> gibt den horizontalen Radius der Ellipse an, und das zweite <length-percentage> den vertikalen Radius.

Spezifizieren Sie die folgenden Parameter, um auszuwählen, welcher der vier Bögen verwendet werden soll:

• <arc-sweep>: Gibt an, ob der gewünschte Bogen der ist, der im Uhrzeigersinn (cw) oder gegen den Uhrzeigersinn (ccw) um die Ellipse gezeichnet wird. Wenn weggelassen, ist der Standard ccw.
• <arc-size>: Gibt an, ob der gewünschte Bogen der größere (large) oder kleinere (small) der beiden Bögen ist. Wenn weggelassen, ist der Standard small.
• <angle>: Gibt den Winkel in Grad an, um den die Ellipse relativ zur x-Achse gedreht werden soll. Ein positiver Winkel rotiert die Ellipse im Uhrzeigersinn, ein negativer dagegen gegen den Uhrzeigersinn. Wenn weggelassen, ist der Standard 0deg.

Besondere Situationen werden wie folgt behandelt:

• Wenn nur ein <length-percentage> bereitgestellt wird, wird derselbe Wert sowohl für den horizontalen als auch für den vertikalen Radius verwendet, wodurch effektiv ein Kreis entsteht. In diesem Fall haben <arc-size> und <angle> keine Auswirkungen.
• Wenn einer der Radien null ist, ist der Befehl gleichbedeutend mit einem <line-command> zum Endpunkt.
• Wenn einer der Radien negativ ist, wird stattdessen sein absoluter Wert verwendet.
• Wenn die horizontalen und vertikalen Radien keine Ellipse beschreiben, die groß genug ist, um sowohl den Start- als auch den Endpunkt zu schneiden (nach Rotation um den angegebenen <angle>), werden die Radien gleichmäßig skaliert, bis die Ellipse gerade groß genug ist, um beide Punkte zu schneiden.
• Wenn die Start- und Endpunkte des Bogens genau gegenüberliegenden Seiten der Ellipse liegen, gibt es nur eine mögliche Ellipse und zwei mögliche Bögen. In diesem Fall spezifiziert <arc-sweep> den zu wählenden Bogen, und <arc-size> hat keinen Effekt.

close: Fügt der Liste der Formbefehle eine ClosePath-Anweisung hinzu, indem sie eine gerade Linie von der aktuellen Position (Ende des letzten Befehls) zum ersten Punkt im durch das from <coordinate-pair>-Parameter definierten Pfad zieht. Um die Form zu schließen, ohne eine Linie zu zeichnen, fügen Sie vor dem close-Befehl ein <move-command> mit den ursprünglichen Koordinaten ein. Wenn der close-Befehl unmittelbar gefolgt von einem <move-command> ist, definiert er den Startpunkt der nächsten Form oder des nächsten Teilpfades.

Die shape()-Funktion ermöglicht es Ihnen, komplexe Formen zu definieren. Sie ist in vielerlei Hinsicht der path()-Funktion ähnlich:

• Der <fill-rule>-Parameter in der shape()-Funktion funktioniert genau wie der gleiche Parameter in der path()-Funktion.
• Die shape()-Funktion erfordert die Angabe von einem oder mehreren <shape-command>s, wobei jeder Befehl einen zugrunde liegenden Pfadbefehl verwendet, wie z. B. MoveTo, LineTo und ClosePath.

Allerdings bietet shape() mehrere Vorteile gegenüber der Verwendung von path():

• shape() verwendet die standardmäßige CSS-Syntax, was es einfacher macht, Formen direkt in Ihrem Stylesheet zu erstellen und zu ändern. Im Vergleich dazu verwendet path() die SVG-Pfad-Syntax, die weniger intuitiv ist für diejenigen, die nicht mit SVG vertraut sind.
• shape() unterstützt eine Vielzahl von CSS-Einheiten, einschließlich Prozentsätze, rem und em. path() hingegen definiert Formen als einen einzigen String und beschränkt Einheiten auf px.
• shape() ermöglicht auch die Verwendung von CSS-Mathematikfunktionen wie calc(), max() und abs(), was mehr Vielseitigkeit bei der Definition von Formen bietet.

<shape()> = 
  shape( <'fill-rule'>? from <position> , <shape-command># )  

<fill-rule> = 
  nonzero  |
  evenodd  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<shape-command> = 
  <move-command>             |
  <line-command>             |
  close                      |
  <horizontal-line-command>  |
  <vertical-line-command>    |
  <curve-command>            |
  <smooth-command>           |
  <arc-command>              

<length-percentage> = 
  <length>      |
  <percentage>  

<move-command> = 
  move <command-end-point>  

<line-command> = 
  line <command-end-point>  

<horizontal-line-command> = 
  hline [ to [ <length-percentage> | left | center | right | x-start | x-end ] | by <length-percentage> ]  

<vertical-line-command> = 
  vline [ to [ <length-percentage> | top | center | bottom | y-start | y-end ] | by <length-percentage> ]  

<curve-command> = 
  curve [ [ to <position> with <control-point> [ / <control-point> ]? ] | [ by <coordinate-pair> with <relative-control-point> [ / <relative-control-point> ]? ] ]  

<smooth-command> = 
  smooth [ [ to <position> [ with <control-point> ]? ] | [ by <coordinate-pair> [ with <relative-control-point> ]? ] ]  

<arc-command> = 
  arc <command-end-point> [ [ of <length-percentage>{1,2} ] && <arc-sweep>? && <arc-size>? && [ rotate <angle> ]? ]  

<command-end-point> = 
  to <position>         |
  by <coordinate-pair>  

<control-point> = 
  <position>                |
  <relative-control-point>  

<coordinate-pair> = 
  <length-percentage>{2}  

<relative-control-point> = 
  <coordinate-pair> [ from [ start | end | origin ] ]?  

<arc-sweep> = 
  cw   |
  ccw  

<arc-size> = 
  large  |
  small  

Dieses Beispiel zeigt, wie die shape()-Funktion in der offset-path-Eigenschaft verwendet werden kann, um die Form des Pfades zu definieren, dem ein Element folgen kann.

Die erste Form, shape1, folgt einem kubischen Bézierkurvenpfad, der durch den curve to-Befehl definiert ist. Anschließend zeichnet der close-Befehl eine gerade Linie vom Endpunkt der Kurve zurück zum Ausgangspunkt, der im from-Befehl definiert ist. Schließlich bewegt sich shape1 zu seiner neuen Position bei 0px 150px und fährt dann entlang einer horizontalen Linie fort.

Die zweite Form, shape2, folgt anfangs einer horizontalen Linie, kehrt dann zu ihrem Startpunkt bei 50px 90px zurück. Anschließend folgt sie einer vertikalen Linie, bevor der Pfad wieder zum Ausgangspunkt geschlossen wird.

Beide Formen beginnen mit ihren ursprünglichen Farben und übergehen allmählich zu hotpink bis zum Ende der move-Animation und kehren zu ihrer ursprünglichen Farbe zurück, wenn die Animation neu startet. Diese zyklische Farbänderung bietet Ihnen einen visuellen Hinweis auf den Fortschritt und Neustart der Animation.

<div class="container">
  Using <code>&lt;curve-command&gt;</code>
  <div class="shape shape1">>></div>
</div>

<div class="container">
  Using <code>&lt;move-command&gt;</code> and
  <code>&lt;hvline-command&gt;</code>
  <div class="shape shape2">>></div>
</div>

body {
  align-items: center;
  justify-content: center;
  display: flex;
}

.container {
  position: relative;
  display: inline-block;
  width: 250px;
  height: 250px;
  border: 2px dotted green;
  margin: 20px;
}

@supports not (offset-path: shape(from 0 0, move to 0 0)) {
  .container {
    display: none;
  }
  body::after {
    content: "Your browser doesn't support the `shape()` function yet.";
  }
}

.shape {
  width: 50px;
  height: 50px;
  background: #2bc4a2;
  position: absolute;
  text-align: center;
  line-height: 50px;
  animation: move 6s infinite linear;
}

.shape1 {
  offset-path: shape(
    from 30% 60px,
    curve to 180px 180px via 90px 190px,
    close,
    move by 0px 150px,
    hline by 40%
  );
}

.shape2 {
  offset-path: shape(
    from 50px 90px,
    hline to 8em,
    move to 50px 90px,
    vline by 20%,
    close
  );
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
    background-color: hotpink;
  }
}

Ergebnis

Dieses Beispiel zeigt, wie die shape()-Funktion in der clip-path-Eigenschaft verwendet werden kann, um verschiedene Formen für die Clip-Region zu erzeugen. Die erste Form (shape1) verwendet ein Dreieck, das durch gerade Linien definiert ist. Die zweite Form (shape2) umfasst Kurven und sanfte Übergänge; sie zeigt auch die Verwendung des <move-command> nach dem close-Befehl, der der Clip-Region eine rechteckige Form hinzufügt.

<div class="container">
  <div class="shape shape1"></div>
</div>

<div class="container">
  <div class="shape shape2"></div>
</div>

body {
  align-items: center;
  justify-content: center;
  display: flex;
}

.container {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  margin: 20px;
  background-color: lightgray;
}

@supports not (clip-path: shape(from 0 0, move to 0 0)) {
  .container {
    display: none;
  }
  body::after {
    content: "Your browser doesn't support the `shape()` function yet.";
  }
}

.shape {
  width: 100%;
  height: 100%;
  background: #2bc4a2;
  position: absolute;
  text-align: center;
  line-height: 50px;
}

/* Triangular clipping region */
.shape1 {
  clip-path: shape(from 0% 0%, line to 100% 0%, line to 50% 100%, close);
}

/* Clipping region with curves and smooth transitions and a box */
.shape2 {
  clip-path: shape(
    from 10px 10px,
    curve to 60px 20% via 40px 0,
    smooth to 90px 0,
    curve by -20px 60% via 10% 40px 20% 20px,
    smooth by -40% -10px via -10px 70px,
    close,
    move to 100px 100px,
    hline by 50px,
    vline by 50px,
    hline by -50px,
    close
  );
}

Ergebnis

• clip-path
• offset-path
• CSS shapes Modul
• Überblick über Formen Leitfaden
• Grundformen Leitfaden