Creatore CSS clip-path
Disegna maschere poligonali con anteprima e CSS da copiare.
Come usare Creatore CSS clip-path
CSS clip-path maker turns a list of x,y percentage points into a clip-path: polygon() rule and shows it applied to a gradient box. Enter 3 to 50 points, one pair per line, with each coordinate between 0 and 100. The default four points form a trapezoid, and the generated declaration can be copied straight into a stylesheet.
- Inserisci i valori richiesti nel pannello delle impostazioni.
- Imposta i punti del poligono (% x,y; una coppia per riga).
- Esegui Creatore CSS clip-path, esamina il risultato, poi usa i controlli disponibili per copiare o scaricare.
Cosa supporta questo strumento
Disegna maschere poligonali con anteprima e CSS da copiare.
- Punti del poligono (% x,y; una coppia per riga)
- Set this value for your task.
Limiti ed elaborazione
Le immagini usano il limite esistente della canvas di 32 megapixel. Dove supportato sono consentite fino a 100 immagini di origine. L'HTML incollato è limitato a 200.000 caratteri; i diagrammi Mermaid a 20.000 caratteri e 300 righe. La generazione di SVG e PNG richiede un browser.
Domande frequenti
How do I make a triangle with CSS clip-path?
Enter three points on separate lines: 50,0 then 100,100 then 0,100. The tool outputs clip-path: polygon(50% 0%, 100% 100%, 0% 100%); which clips the element to an upward-pointing triangle that scales with its size.
Can I use pixel values in the clip-path maker?
No. Each coordinate is read as a percentage of the element's width or height and must be between 0 and 100; anything else returns an error. Percentages keep the shape proportional when the element resizes.
Does the clip-path maker support circle() or ellipse()?
No. It only generates polygon() shapes. You can approximate a circle with many points, up to the 50-point limit, or write a circle() value yourself after copying the polygon rule.
Dove viene elaborato il mio input?
Questa operazione elabora i dati di origine nel tuo browser. Copia e download sono azioni esplicite; l'input di origine non viene salvato in un account né in una cronologia.
Quali sono i limiti di input?
Le immagini usano il limite esistente della canvas di 32 megapixel. Dove supportato sono consentite fino a 100 immagini di origine. L'HTML incollato è limitato a 200.000 caratteri; i diagrammi Mermaid a 20.000 caratteri e 300 righe. La generazione di SVG e PNG richiede un browser.