Funzione CSS polygon()

Definizione e uso

CSS polygon() La funzione viene utilizzata per definire un poligono.

polygon() Funzione con clip-path Proprietà e shape-outside usare insieme le proprietà.

Esempio

Esempio 1

Ridurre l'immagine a un poligono:

img {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

Prova da solo

Esempio 2

Ridurre l'immagine a un poligono:

img {
  clip-path: polygon(100% 0%, 50% 50%, 100% 100%);
}

Prova da solo

Esempio 3

usare polygon()、clip-path e shape-outside:

img {
  float: left;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

Prova da solo

Sintassi CSS

polygon(fill-rule, length-percentage)
Valore Descrizione
fill-rule

Opzionale. Specificare le regole di riempimento. Può essere nonzero o evenodd.

Il valore predefinito è nonzero.
length-percentage

Obbligatorio. Specificare i punti che definiscono il poligono. Questo può essere una lunghezza o un valore percentuale.

Ogni punto rappresenta una coppia di coordinate x e y. 0 0 definisce l'angolo in alto a sinistra, 100% 100% definisce l'angolo in basso a destra.

Dettagli tecnici

Versione: Modulo CSS Shape Livello 1

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente la funzione per la prima volta.

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

pagine correlate

Riferimento:proprietà clip-path

Riferimento:proprietà shape-outside

Riferimento:Funzione circle()

Riferimento:Funzione ellipse()

Riferimento:Funzione inset()