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 einer der <basic-shape>
Datentypen. Sie wird verwendet, um ein Polygon zu zeichnen, indem ein oder mehrere Koordinatenpaare angegeben werden, von denen jedes einen Eckpunkt der Form darstellt.
Probieren Sie es aus
clip-path: polygon(
0% 20%,
60% 20%,
60% 0%,
100% 50%,
60% 100%,
60% 80%,
0% 80%
);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element"></div>
</section>
#default-example {
background: #fe9;
}
#example-element {
background: linear-gradient(to bottom right, #f52, #05f);
width: 100%;
height: 100%;
}
Syntax
/* 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 sind durch ein Komma und optional durch Leerzeichen getrennt. Der erste Parameter ist ein optionaler <fill-rule>
-Wert. Zusätzliche Parameter sind Punkte, die das Polygon definieren. Jeder Punkt ist ein Paar von x/y
-Koordinaten <length-percentage>
-Werten, die durch ein Leerzeichen getrennt sind, z. B. "0 0" und "100% 100%" für die linke obere und die untere rechte Ecke.
Parameter
<fill-rule>
Optional-
Ein optionaler Wert von
nonzero
(Standard, wenn weggelassen) oderevenodd
, der die Füllregel angibt. <length-percentage>
-
Jeder Eckpunkt des Polygons wird durch ein Paar von
<length-percentage>
-Werten dargestellt, die diex/y
-Koordinaten des Eckpunkts relativ zur Bezugsbox der Form angeben.
Rückgabewert
Gibt einen <basic-shape>
-Wert zurück.
Beschreibung
Mit der polygon()
-Funktion können Sie nahezu jede Form erstellen, indem Sie die Koordinaten ihrer Punkte angeben. Die Reihenfolge, in der Sie die Punkte definieren, ist wichtig und kann zu unterschiedlichen Formen führen. Die polygon()
-Funktion erfordert mindestens 3 Punkte, die ein Dreieck bilden, aber es gibt keine Obergrenze.
Die polygon()
-Funktion akzeptiert durch Kommas getrennte Koordinaten oder Punkte als ihre Werte. Jeder Punkt wird durch ein Paar von durch 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)
Aufgrund der oben genannten Punkte können die Koordinaten des Containers wie folgt visualisiert werden:
Achse | Punkt 1 | Punkt 2 | Punkt 3 | Punkt 4 | Punkt n |
---|---|---|---|---|---|
x | 0% | 100% | 100% | 0% | xn |
y | 0% | 0% | 100% | 100% | yn |
Wenden Sie diese Koordinaten auf die CSS-Eigenschaft clip-path
mithilfe der polygon()
-Funktion an:
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
Dies würde eine rechteckige Form in der Größe des übergeordneten Inhalts erstellen, 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
Beispiele
Erstellen eines Dreiecks
In diesem Beispiel wird ein Dreieck durch die Definition der Koordinaten seiner drei Punkte gebildet.
HTML
<div class="triangle"></div>
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 mittlere Punkt (50% 50%
) und die untere rechte Ecke (100% 100%
) des Containers.
Festlegen eines Polygons für shape-outside
In diesem Beispiel wird eine Form erstellt, der der Text mit der Eigenschaft shape-outside
folgen soll.
<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>
.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
Siehe auch
- Eigenschaften, die diesen Datentyp verwenden:
clip-path
,shape-outside
- Leitfaden zu grundlegenden Formen