shape()

<fill-rule> Optional

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

• nonzero: Ein Punkt wird als innerhalb der Form betrachtet, wenn ein Strahl, der vom Punkt ausgeht, mehr von links nach rechts als von rechts nach links die Pfadsegmente kreuzt, was zu einer ungleich Null-Summe 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 ausgeht, eine ungerade Anzahl von Pfadsegmenten kreuzt. Das bedeutet, dass der Strahl bei jedem Eintritt in die Form nicht gleich oft ausgetreten ist, was auf eine ungerade Anzahl von Eintritten ohne entsprechende Austritte hinweist.

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

from <coordinate-pair>

Definiert den Startpunkt des ersten <shape-command> als ein Paar von Koordinaten, gemessen von der oberen linken Ecke der Referenzbox. Die Koordinaten werden als durch Leerzeichen getrennte <x> <y> <length-percentage>-Werte angegeben, die den linken und oberen Versatz darstellen. Prozentwerte sind relativ zur Breite und 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 Kommata getrennten Befehlen an, die die Form definieren, unter Verwendung einer Syntax ähnlich der von SVG-Pfadbefehlen. Befehle umfassen <move-command>, <line-command>, <hv-line-command>, <curve-command>, <smooth-command>, <arc-command> und close. Der Startpunkt jedes Befehls ist der Endpunkt des vorherigen Befehls, wobei der erste Punkt der Form durch den Parameter from <coordinate-pair> definiert wird.

Die Syntax der meisten Formbefehle ist ein Schlüsselwort, das eine Anweisung wie move oder line bereitstellt, gefolgt von dem Schlüsselwort by oder to und einem Koordinaten-Satz.

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

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

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

Die folgenden <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. Es wird nichts gezeichnet. Stattdessen wird die Startposition für den nächsten Befehl festgelegt. Das Schlüsselwort by oder to 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 des nächsten Teilpfades.

<line-command>: Angegeben als line [by | to] <coordinate-pair>. Dieser Befehl fügt der Liste der Formbefehle einen LineTo-Befehl hinzu. Es wird eine gerade Linie vom Startpunkt des Befehls bis zu seinem Endpunkt gezeichnet. Das Schlüsselwort by oder to gibt an, ob der durch <coordinate-pair> angegebene Endpunkt 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 bis zur x-Position gezeichnet, die durch <length-percentage> definiert ist. Mit vline wird eine vertikale Linie vom Startpunkt des Befehls bis zur y-Position gezeichnet, die durch <length-percentage> definiert ist. Das Schlüsselwort by oder to bestimmt den relativen oder absoluten Endpunkt. Dieser Befehl entspricht <line-command>, wobei ein Koordinatenwert durch den einzelnen <length-percentage> festgelegt wird und der andere Koordinatenwert unverändert vom Startbefehl 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ézier-Kurvenbefehl hinzu. Das Schlüsselwort by oder to bestimmt, ob der Endpunkt der Kurve, der durch das erste <coordinate-pair> angegeben wird, relativ oder absolut ist. Das Schlüsselwort via gibt die Kontrollpunkte der Bézier-Kurve an.

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

<smooth-command>: Angegeben als smooth [by | to] <coordinate-pair> [via <coordinate-pair>]. Dieser Befehl fügt der Liste der Formbefehle einen glatten Bézier-Kurvenbefehl hinzu. Das Schlüsselwort by oder to 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ézier-Kurve, die den vorherigen Kontrollpunkt und den aktuellen Endpunkt verwendet, um die Kurve zu definieren.
• Wenn das optionale via-Schlüsselwort enthalten ist, spezifiziert es die Kontrollpunkte der Kurve durch <coordinate-pair>, wobei eine glatte kubische Bézier-Kurve definiert wird, die durch den vorherigen Kontrollpunkt, den aktuellen Kontrollpunkt und den aktuellen Endpunkt gebildet wird.

Glatte Kurven sorgen für einen durchgehenden Übergang von der Form, während quadratische Kurven dies nicht tun. Glatte quadratische Kurven gewährleisten einen nahtlosen Übergang mit einem einzelnen 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 einen elliptischen Bogenkurvenbefehl hinzu. Es wird ein elliptischer Bogen zwischen einem Startpunkt und einem Endpunkt gezeichnet. Das Schlüsselwort by oder to bestimmt, ob der Endpunkt der Kurve, der durch das erste <coordinate-pair> angegeben wird, relativ oder absolut ist.

Der elliptische Bogenkurvenbefehl definiert zwei mögliche Ellipsen, die sowohl den Start- als auch den Endpunkt schneiden, und jede kann im oder gegen den Uhrzeigersinn gezeichnet werden, was zu vier möglichen Bögen abhängig von Größe, Richtung und Winkel des Bogens führt. Das Schlüsselwort of gibt die Größe der Ellipse an, aus der der Bogen entnommen wird: Der erste <length-percentage> gibt den horizontalen Radius der Ellipse an, und der zweite <length-percentage> gibt den vertikalen Radius an.

Folgende Parameter spezifizieren, welcher der vier Bögen verwendet werden soll:

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

Besondere Situationen werden wie folgt behandelt:

• Wenn nur ein <length-percentage> angegeben wird, wird derselbe Wert sowohl für den horizontalen als auch den vertikalen Radius verwendet, was effektiv einen Kreis erzeugt. In diesem Fall haben <arc-size> und <angle> keinen Einfluss.
• Wenn einer der Radien null ist, entspricht der Befehl einem <line-command> zum Endpunkt.
• Wenn einer der Radien negativ ist, wird sein absoluter Wert verwendet.
• Wenn die horizontalen und vertikalen Radien keine ausreichende Größe beschreiben, 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 gibt <arc-sweep> den zu wählenden Bogen an, und <arc-size> hat keinen Einfluss.

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

Die shape()-Funktion ermöglicht Ihnen die Definition komplexer Formen. Sie ähnelt der path() Formfunktion in mehreren Aspekten:

• Der <fill-rule>-Parameter in der shape()-Funktion funktioniert genauso wie der gleiche Parameter in der path()-Funktion.
• Die shape()-Funktion erfordert die Angabe eines oder mehrerer <shape-command>s, wobei jeder Befehl einen zugrundeliegenden Pfadbefehl, wie MoveTo, LineTo und ClosePath, verwendet.

Allerdings bietet shape() mehrere Vorteile im Vergleich zur Verwendung von path():

• shape() verwendet die standardmäßige CSS-Syntax, wodurch es einfacher wird, Formen direkt in Ihrem Stylesheet zu erstellen und zu modifizieren. Im Vergleich dazu verwendet path() die SVG-Pfad Syntax, die weniger intuitiv für diejenigen ist, die nicht mit SVG vertraut sind.
• shape() unterstützt eine Vielzahl von CSS-Einheiten, einschließlich Prozentangaben, rem und em. path() hingegen definiert Formen als einen einzelnen 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 Eigenschaft offset-path verwendet werden kann, um die Form des Pfades zu definieren, dem ein Element folgen kann.

Die erste Form, shape1, folgt einem kubischen Bézier-Kurvenpfad, der durch den curve to-Befehl definiert ist. Als nächstes zeichnet der close-Befehl eine gerade Linie vom Endpunkt der Kurve zurück zum Anfangspunkt, 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 zunächst einer horizontalen Linie, kehrt dann zu ihrer ursprünglichen Position bei 50px 90px zurück. Danach folgt sie einer vertikalen Linie, bevor sie den Pfad zurück zum ursprünglichen Punkt schließt.

Beide Formen beginnen in ihren Originalfarben und gehen allmählich bis zum Ende der move-Animation in hotpink über, wobei sie zu ihrer Anfangsfarbe zurückkehren, sobald die Animation neu startet. Diese zyklische Farbänderung bietet Ihnen einen visuellen Hinweis auf die Fortschritte und den 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 demonstriert, wie die shape()-Funktion in der Eigenschaft clip-path verwendet werden kann, um verschiedene Formen für den Clipping-Bereich zu erstellen. Die erste Form (shape1) verwendet ein durch gerade Linien definiertes Dreieck. Die zweite Form (shape2) umfasst Kurven und glatte Übergänge; sie veranschaulicht auch die Verwendung von <move-command> nach dem close-Befehl, der dem Clipping-Bereich 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-Formen Modul
• Übersicht über Formen Leitfaden
• Grundformen Leitfaden