diff options
Diffstat (limited to 'files/de/web/css/basic-shape/index.html')
| -rw-r--r-- | files/de/web/css/basic-shape/index.html | 176 |
1 files changed, 176 insertions, 0 deletions
diff --git a/files/de/web/css/basic-shape/index.html b/files/de/web/css/basic-shape/index.html new file mode 100644 index 0000000000..9c53920461 --- /dev/null +++ b/files/de/web/css/basic-shape/index.html @@ -0,0 +1,176 @@ +--- +title: <basic-shape> +slug: Web/CSS/basic-shape +tags: + - CSS + - CSS Datentyp + - CSS Formen + - Referenz +translation_of: Web/CSS/basic-shape +--- +<p>{{CSSRef}}</p> + +<p>Der <code><basic-shape></code> <a href="/de/docs/Web/CSS">CSS</a> Datentyp stellt eine geometrische Grundform dar. Er kann in den {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} und {{cssxref("offset-path")}} CSS-Eigenschaften verwendet werden.</p> + +<h2 id="Syntax">Syntax</h2> + +<p>Die unten aufgelisteten Funktionen definieren <code><basic-shape></code> -Werte.</p> + +<p>Wenn eine Form erstellt wird, definiert sich der Referenzrahmen durch jede CSS-Eigenschaft, die <code><basic-shape></code> -Werte benutzt. Der Koordinatenursprung für die Form liegt in der oberen linken Ecke des Referenzrahmens, wobei die x-Achse nach rechts und die y-Achse nach unten verläuft. Dieses Koordinatensystem ist in vielen Computergrafiksystemen üblich.</p> + +<h3 id="Form-Funktionen">Form-Funktionen</h3> + +<p>Die folgenden Formen werden unterstützt. Alle <code><basic-shape></code> Werte verwenden die funktionale Schreibweise und werden mithilfe der <a href="/de/docs/Web/CSS/Wertdefinitionssyntax">Wertdefinitionssyntax</a> definiert.</p> + +<dl> + <dt><code>inset()</code></dt> + <dd> + <pre class="syntaxbox"><code>inset( <shape-arg>{1,4} [round <border-radius>]? )</code></pre> + + <p>Definiert ein nach innen versetztes Rechteck.</p> + + <p>Wenn alle vier ersten Argumente vorhanden sind, stellen sie den Versatz des Rechtecks oben, links, rechts und unten dar. Der Versatz bezieht sich auf den Referenzrahmen. Wie auch bei der {{cssxref("margin")}}-Eigenschaft können weniger als vier Werte als Kurzform angegeben werden.</p> + + <p>Die optionalen {{cssxref("<border-radius>")}}-Argumente definieren abgerundete Ecken für das Rechteck. Auch hier ist die <code><border-radius></code>-Kurzform-Syntax zulässig.</p> + </dd> + <dt><code>circle(</code>)</dt> + <dd> + <pre class="syntaxbox"><code><code><code>circle( [<shape-radius>]? [at <position>]? )</code></code></code></pre> + + <p>Definiert einen Kreis.</p> + + <p>Das <code><shape-radius></code>-Argument stellt den Radius r des Kreises dar, negative Werte sind verboten. Ein Prozentwert bezieht sich auf <code>sqrt(a^2+b^2)/sqrt(2)</code>, wobei a und b Höhe und Breite des Referenzrahmens darstellen. Dieser Referenzwert ist die Länge einer Seite eines Quadrats, das dieselbe Fläche wie der Referenzrahmen hat.</p> + + <p>Das {{cssxref("<position>")}}-Argument definiert den Mittelpunkt des Kreises. Standardmäßig wird der Kreis in der Mitte des Referenzrahmens platziert.</p> + </dd> + <dt><code>ellipse()</code></dt> + <dd> + <pre class="syntaxbox"><code><code><code>ellipse( [<shape-radius>{2}]? [at <position>]? )</code></code></code></pre> + + <p>Definiert eine Ellipse, deren Hauptachse und Nebenachse entlang der x- oder y-Achsen verlaufen.</p> + + <p>Das <code><shape-radius></code> Argument repräsentiert den Radius entlang der x- bzw. y-Achse. Negative Werte sind ungültig. Prozentwerte werden im Verhältnis zur Breite (für die x-Achse) und Höhe (für die y-Achse) des Referenzrahmens bestimmt.</p> + + <p>Das {{cssxref("<position>")}}-Argument definiert den Mittelpunkt der Ellipse. Standardmäßig wird die Ellipse in der Mitte des Referenzrahmens platziert.</p> + </dd> +</dl> + +<dl> + <dt><code>polygon()</code></dt> + <dd> + <pre><code>polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )</code></pre> + + <p>Definiert ein Vieleck (Polygon).</p> + + <p><code><fill-rule></code> definiert die <a href="https://developer.mozilla.org/de/docs/Web/SVG/Attribute/fill-rule">Füllregel</a>, die zur Bestimmung der Innenfläche des Polygons verwendet werden soll. Mögliche Werte sind <code>nonzero</code> und <code>evenodd</code>. Der Standardwert ist <code>nonzero</code>.</p> + + <p>Jedes Argumentpaar der Liste stellt die x- und y-Koordinate einer Ecke des Vielecks dar.</p> + </dd> + <dt><code>path()</code></dt> + <dd> + <pre><code>path( [<fill-rule>,]? <string>)</code></pre> + + <p>Definiert einen <a href="https://developer.mozilla.org/de/docs/Web/SVG/Attribute/d">SVG-Pfad</a>, also eine Kombination aus Kurven, Strecken und Punkten.</p> + + <p><code><fill-rule></code> definiert die <a href="https://developer.mozilla.org/de/docs/Web/SVG/Attribute/fill-rule">Füllregel</a>, die zur Bestimmung der Innenfläche des Polygons verwendet werden soll. Mögliche Werte sind <code>nonzero</code> und <code>evenodd</code>. Der Standardwert ist <code>nonzero</code>.</p> + + <p><code><string></code> entspricht dem <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">d</span></font>-Attribut des SVG-Pfades und ist der SVG-Pfad-Text in Anführungszeichen.</p> + </dd> +</dl> + +<p>Die Argumente, die oben nicht definiert sind, werden folgendermaßen definiert:</p> + +<pre class="syntaxbox"><code><shape-arg> = <length> | <percentage> +<shape-radius> = <length> | <percentage> | closest-side | farthest-side</code></pre> + +<p><code>closest-side</code> verwendet den Abstand des Mittelpunkts der Form zur nächsten Seite des Referenzrahmens. Für Kreise ist dies die nächste Seite in beliebiger Richtung. Für Ellipsen ist dies die nächste Seite in Radiusrichtung.</p> + +<p><code>farthest-side</code> verwendet die Länge vom Mittelpunkt der Form zur entferntesten Seite der Referenzrahmens. Für Kreise ist dies die entfernteste Seite in beliebiger Richtung. Für Ellipsen ist dies die entfernteste Seite in Radiusrichtung.</p> + +<h2 id="Berechnete_Werte_von_Grundformen">Berechnete Werte von Grundformen</h2> + +<p>Die Werte in einer <code><basic-shape></code> Funktion werden wie angegeben berechnet, mit folgenden Ausnahmen:</p> + +<ul> + <li>Anstelle von ausgelassenen Werten werden Standardwerte verwendet.</li> + <li>Ein {{cssxref("<position>")}}-Wert in <code>circle()</code> oder <code>ellipse()</code> wird als ein Versatzpaar (horizontal, dann vertikal) vom Ursprung berechnet, wobei jeder Versatz als Kombination einer absoluten Länge und einem Prozentwert angegeben wird.</li> + <li>Ein <a href="/de/docs/Web/CSS/border-radius"><code><border-radius></code></a> Wert in <code>inset()</code> wird als eine erweiterte Liste aller acht {{cssxref("<length>")}}-Werte oder Prozentwerte berechnet.</li> +</ul> + +<h2 id="Interpolation_von_Grundformen">Interpolation von Grundformen</h2> + +<div>Zur Interpolation zwischen zwei Grundformen werden die folgenden Regeln angewandt. In den Formfunktionen werden alle Werte als Liste interpoliert. Die Listenwerte werden, soweit möglich, als {{cssxref("<length>")}}, {{cssxref("<percentage>")}} oder {{cssxref("calc")}}-Ausdruck interpoliert. Falls die Listenwerte nicht diesen Typen entsprechen, jedoch identisch sind (wie beispielsweise Zahlen ungleich null an der gleichen Position innerhalb beider Listen), werden diese Werte interpoliert.</div> + +<div></div> + +<ul> + <li>Beide Formen müssen den gleichen Referenzrahmen verwenden.</li> + <li>Falls beide Formen vom gleichen Typ sind, d. h. vom Typ <code>ellipse()</code> oder <code>circle()</code>, und keiner der Radien die Schlüsselwörter <code>closest-side</code> oder <code>farthest-side</code> verwendt, wird zwischen jedem Wert der Formfunktionen interpoliert.</li> + <li>Falls beide Formen vom Typ <code>inset()</code> sind, wird zwischen jedem Wert der Formfunktionen interpoliert.</li> + <li>Falls beide Formen vom Typ <code>polygon()</code> sind, beide Vielecke die gleiche Anzahl an Eckpunkten haben und die gleiche <a href="/de/docs/Web/SVG/Attribute/fill-rule"><code><fill-rule></code></a> verwenden, wird zwischen jedem Wert der Formfunktionen interpoliert.</li> + <li>In allen anderen Fällen findet keine Interpolation statt.</li> +</ul> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Animiertes_Polygon">Animiertes Polygon</h3> + +<p>In diesem Beispiel nutzten wir eine <a href="/de/docs/Web/CSS/@keyframes">@keyframes</a> Regel, um den Pfad zwischen zwei Vielecken zu animieren. (In diesem Beispiel müssen beide Vielecke dieselbe Anzahl Kanten haben.)</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div></div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: 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%); + } +}</pre> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{EmbedLiveSample('Animated_polygon','340', '340')}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Anmerkung</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS Shapes', '#basic-shape-functions', '<basic-shape>') }}</td> + <td>{{ Spec2('CSS Shapes') }}</td> + <td>Ursprüngliche Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.types.basic-shape")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("shape-outside")}}</li> +</ul> |