polygon()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die polygon() CSS-Funktion ist eine der <basic-shape>-Datentypen. Sie wird verwendet, um ein Polygon zu zeichnen, indem ein oder mehrere Koordinatenpaare angegeben werden, die jeweils einen Scheitelpunkt der Form darstellen.

Probieren Sie es aus

Syntax

css
/* Specified as coordinate list */
/* polygon(<length-percentage> <length-percentage>, ... )*/
polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%)
polygon(0px 0px, 200px 100px, 0px 200px)
polygon(0% 0px, 100% 100px, 0px 100%)
polygon(0 0, 50% 1rem, 100% 2vw, calc(100% - 20px) 100%, 0 100%)

/* Specified as coordinate list and fill rule*/
/* polygon(<fill-rule> <length-percentage> <length-percentage>, ... )*/
polygon(nonzero, 0% 0%, 50% 50%, 0% 100%)
polygon(evenodd, 0% 0%, 50% 50%, 0% 100%)

Die polygon()-Parameter werden durch ein Komma und optionalen Leerraum getrennt. Der erste Parameter ist ein optionaler <fill-rule>-Wert. Weitere Parameter sind Punkte, die das Polygon definieren. Jeder Punkt ist ein Paar von x/y-Koordinaten-<length-percentage>-Werten, getrennt durch ein Leerzeichen, z. B. "0 0" und "100% 100%" für die linke/obere Ecke und die untere rechte Ecke.

Hinweis: Das SVG-Element <polygon> besitzt separate Attribute für fill-rule und points. Dabei ist points flexibel hinsichtlich der Verwendung von Leer- und Kommatrennzeichen. Die Regeln für Trennzeichen in polygon() in CSS sind jedoch streng einzuhalten.

Parameter

<fill-rule> Optional

Ein optionaler Wert nonzero (Standardwert, wenn ausgelassen) oder evenodd, der die Füllregel angibt.

<length-percentage>

Jeder Scheitelpunkt des Polygons wird durch ein Paar von <length-percentage>-Werten dargestellt, die die x/y-Koordinaten des Scheitelpunkts relativ zur Referenzbox der Form angeben.

Rückgabewert

Gibt einen <basic-shape>-Wert zurück.

Beschreibung

Mit der polygon()-Funktion können Sie nahezu jede beliebige Form erstellen, indem Sie die Koordinaten ihrer Punkte angeben. Die Reihenfolge, in der die Punkte definiert werden, ist entscheidend und kann zu unterschiedlichen Formen führen. Die polygon()-Funktion erfordert mindestens 3 Punkte, was ein Dreieck erzeugt, aber es gibt keine Obergrenze.

Die polygon()-Funktion akzeptiert Komma-getrennte Koordinaten oder Punkte als Werte. Jeder Punkt wird durch ein Paar aus Leerzeichen-getrennten x- und y-Werten dargestellt, die die Koordinaten der Punkte innerhalb des Polygons angeben.

polygon(x1 y1, x2 y2, x3 y3, x4 y4, xn yn)

Basierend darauf kann die Zuordnung der Koordinaten im Container wie folgt veranschaulicht werden:

Achse Punkt 1 Punkt 2 Punkt 3 Punkt 4 Punkt n
x 0% 100% 100% 0% xn
y 0% 0% 100% 100% yn

Wenn diese Koordinaten auf die CSS-Eigenschaft clip-path angewendet werden, die die polygon()-Funktion verwendet:

css
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);

Würde dies eine rechteckige Form erzeugen, die die Größe des übergeordneten Inhalts hat, indem die Koordinaten ihrer vier Ecken angegeben werden: oben links (0% 0%), oben rechts (100% 0%), unten rechts (100% 100%) und unten links (0% 100%).

Formale Syntax

<polygon()> = 
polygon( <'fill-rule'>? [ round <length> ]? , [ <length-percentage> <length-percentage> ]# )

<fill-rule> =
nonzero |
evenodd

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

Beispiele

Ein Dreieck erstellen

In diesem Beispiel wird ein Dreieck gebildet, indem die Koordinaten seiner drei Punkte definiert werden.

HTML

html
<div class="triangle"></div>

CSS

css
.triangle {
  width: 400px;
  height: 400px;
  background-color: magenta;
  clip-path: polygon(100% 0%, 50% 50%, 100% 100%);
}

Ergebnis

Die Koordinaten für das Dreieck sind die obere rechte Ecke (100% 0%), der Mittelpunkt (50% 50%) und die untere rechte Ecke (100% 100%) des Containers.

Ein Polygon für shape-outside setzen

In diesem Beispiel wird eine Form erstellt, der der Text mit der Eigenschaft shape-outside folgt.

html
<div class="box">
  <div class="shape"></div>
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery. Before that night—a memorable night,
    as it was to prove—hundreds of millions of people had watched the rising
    smoke-wreaths of their fires without drawing any special inspiration from
    the fact.
  </p>
</div>
css
.box {
  width: 250px;
}

.shape {
  float: left;
  shape-outside: polygon(
    0 5%,
    15% 12%,
    30% 15%,
    40% 26%,
    45% 35%,
    45% 45%,
    40% 55%,
    10% 90%,
    10% 98%,
    8% 100%,
    0 100%
  );
  width: 300px;
  height: 320px;
}

p {
  font-size: 0.9rem;
}

Spezifikationen

Specification
CSS Shapes Module Level 1
# funcdef-basic-shape-polygon

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
polygon()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch