clip-path con polygon() e circle()

clip-path ritaglia l'area visibile di un elemento secondo una forma specificata. Tutto ciò che si trova al di fuori della forma è invisibile, ma continua a occupare spazio nel layout.

Ritagli un elemento secondo una forma circolare. L'argomento rappresenta il raggio:

Ritagli l'elemento secondo un'ellisse specificando il raggio sull'asse x, il raggio sull'asse y e, facoltativamente, la posizione del centro:

È la funzione clip-path più potente. Definisca un poligono elencando coppie di coordinate x,y:

Ritagli l'elemento secondo un rettangolo, con angoli arrotondati opzionali. Gli argomenti rappresentano le distanze di inserimento:

Crei transizioni angolate tra le sezioni della pagina:

clip-path con lo stesso numero di punti può essere interpolato per creare animazioni di rivelazione e trasformazione:

Per le forme semplicemente arrotondate, border-radius è preferibile: funziona con sfondo e bordo. Utilizzi clip-path quando ha bisogno di forme non rettangolari che border-radius non è in grado di creare.

path() accetta una stringa di percorso SVG per creare forme arbitrarie:

clip-path crea un nuovo contesto di impilamento e, quando viene animato, può attivare il painting a ogni fotogramma. Animare clip-path è più costoso che animare transform o opacity: li combini con attenzione.

Il sistema di coordinate di clip-path è il riquadro del bordo dell'elemento (o il riquadro del margine per SVG). Le percentuali sono relative alle dimensioni dell'elemento.

clip-path ritaglia gli elementi secondo forme geometriche. circle() ed ellipse() creano ritagli arrotondati. polygon() definisce qualsiasi forma con più vertici. inset() ritaglia un rettangolo con arrotondamento opzionale. Animi il passaggio tra forme polygon con lo stesso numero di punti per ottenere rivelazioni d'impatto. Utilizzi path() per creare forme arbitrarie basate su SVG.