Question 1

Che cos'è CSS clip-path?

Accepted Answer

CSS clip-path è una proprietà che definisce una regione di ritaglio per un elemento. Solo il contenuto all'interno della forma specificata è visibile, mentre il resto è nascosto. Viene utilizzato per creare forme non rettangolari per elementi come immagini, div e pulsanti senza bisogno di SVG o markup aggiuntivo.

Question 2

Quali forme posso creare con clip-path?

Accepted Answer

CSS clip-path supporta polygon (forme personalizzate a più punti), circle, ellipse e inset (rettangolare con angoli arrotondati opzionali). Il tipo polygon è il più flessibile, permettendo triangoli, rombi, esagoni, frecce e praticamente qualsiasi forma definita da una serie di punti percentuali.

Question 3

Come funzionano i valori percentuali in clip-path?

Accepted Answer

I valori percentuali in clip-path sono relativi alle dimensioni dell'elemento stesso. 0% 0% è l'angolo superiore sinistro, 100% 0% è quello superiore destro, 50% 50% è il centro e 100% 100% è l'angolo inferiore destro. Questo rende le forme clip-path responsive alla dimensione dell'elemento.

Question 4

clip-path influisce sul layout dell'elemento?

Accepted Answer

No, clip-path influisce solo su ciò che è visibile — non modifica il modello di box né il layout dell'elemento. L'elemento occupa ancora il suo spazio originale. Se hai bisogno di modificare il layout insieme al ritaglio, considera di usare shape-outside con float per effetti di avvolgimento del testo.

Question 5

Come animare clip-path?

Accepted Answer

clip-path può essere animato usando transizioni CSS o animazioni keyframe tra due forme compatibili (ad esempio, polygon con lo stesso numero di punti). Aggiungi transition: clip-path 0.3s ease per abilitare la morfosi fluida della forma al passaggio del mouse o al cambiamento di stato.

Generatore CSS Clip-Path

Domande Frequenti

Comments & Feedback