Generatore di percorsi di ritaglio CSS Clip-Path

Genera visivamente codice CSS clip-path per percorsi di ritaglio, supporta forme come poligoni, cerchi ed ellissi e può elaborare immagini in batch

Segnala bug

Modalità di esecuzione nel browser: I tuoi dati vengono elaborati nel browser e non caricati sul server.

Velocità e stabilità: La velocità di elaborazione dipende dal dispositivo e dal browser. Per grandi batch, la versione desktop può essere più stabile.

Caricamento strumento, attendi...

Se lo strumento online non si carica o non funziona, prova lo strumento desktop. https://tools.yikeaigc.com/

Uso dello strumento

Torna alla vecchia versione

Imposta prima il tracciato di ritaglio, poi copia il codice o elabora le immagini in batch

Dopo aver scelto una forma predefinita puoi trascinare i punti del poligono, oppure passare a cerchio, ellisse o rettangolo interno e regolare i parametri. L’elaborazione in batch usa il tracciato corrente; caricando più immagini vengono mostrate solo le prime 20, ma saranno elaborate tutte.

Info tracciato corrente

Tipopolygon

Punti di controllo3

Suggerimento: completa prima il tracciato, poi copia il codice o elabora le immagini.

Anteprima live In modalità poligono puoi trascinare i punti blu; le coordinate generano il CSS in tempo reale.

Coordinate: relative all’elemento, angolo in alto a sinistra = 0% 0%. polygon(50% 0%, 100% 100%, 0% 100%)

Forma e preset Scegli il tipo, poi regola i parametri

Tipo di forma

Categorie predefinite

Parametri tracciato Valori in percentuale supportati

Testo coordinate

Raggio

Centro X

Centro Y

Raggio orizzontale

Raggio verticale

Centro X

Centro Y

Destra

sotto

Sinistra

Angoli arrotondati

Anteprima e output Lo sfondo influisce solo su anteprima ed esportazione immagini

Larghezza anteprima (px)

Altezza anteprima (px)

Colore A

Colore B

Angolo gradiente

Anteprima immagine

Mostra bordi elemento Includi prefisso -webkit Genera selettore classe

Genera codice

Il codice si aggiorna in tempo reale con le impostazioni.

Applica percorso corrente in batch Imposta prima il percorso nel passaggio precedente, poi scegli le immagini da elaborare.

Clicca o trascina immagini Supporta formati comuni come JPG, PNG, WebP, GIF, BMP

Nessuna immagine selezionata.

Impostazioni output PNG supporta sfondi trasparenti

Formato output

Modalità dimensioni

Limita lato lungo (px)

Larghezza personalizzata (px)

Altezza personalizzata (px)

Qualità output92%

Esterno ritaglio trasparente Usa percorso attuale

In attesa di elaborazione.

Anteprima e risultato immagine Dopo il caricamento mostra le prime 20; l'elaborazione include tutti i file.

Immagini in attesa0 immagini

Seleziona immagini per vedere le miniature.

Risultato elaborazione0 immagini

Le miniature dei risultati appariranno a elaborazione completata.

Istruzioni

Istruzioni per l’uso del software

Progetta il percorso di ritaglio:dopo essere entrato nello strumento, nel passaggio “Progetta percorso” seleziona prima il tipo di forma: puoi usare poligono, cerchio, ellisse o rettangolo inset.
Scegli una forma predefinita:puoi selezionare un preset tra forme di base, frecce e simboli, forme decorative, quindi regolare i parametri secondo necessità.
Modifica i parametri del percorso:per i poligoni puoi trascinare i punti di controllo oppure inserire coordinate percentuali nelle caselle di testo; per cerchi, ellissi e rettangoli inset puoi inserire direttamente raggio, punto centrale, margini e angoli arrotondati.
Imposta l’effetto di anteprima:puoi regolare larghezza e altezza dell’anteprima, colori del gradiente, angolo del gradiente, oppure scegliere un’immagine come contenuto dell’anteprima.
Copia il codice CSS:dopo aver confermato il risultato, fai clic su “Copia clip-path” o “Copia CSS”; puoi scegliere se includere il prefisso -webkit e il selettore di classe.
Elabora immagini in batch:fai clic su “Passaggio successivo: elaborazione in batch”, seleziona più immagini, imposta formato di output, qualità e modalità dimensioni, quindi avvia l’elaborazione.
Scarica i risultati:al termine dell’elaborazione, fai clic su “Scarica tutti i risultati ZIP”; i file di output manterranno per quanto possibile i nomi originali e, in caso di duplicati, verrà aggiunto automaticamente un numero per distinguerli.

Domande frequenti

R: clip-path serve a ritagliare un elemento in una forma specifica ed è spesso usata per visualizzare immagini con forme particolari, progettare bordi di card, creare forme per pulsanti, elementi decorativi nelle pagine web ed effetti interattivi.

R: polygon genera un poligono tramite più punti di coordinate; circle genera un’area di ritaglio circolare; ellipse genera un’area di ritaglio ellittica; inset genera un rettangolo interno e supporta i parametri per gli angoli arrotondati.

R: Le coordinate sono espresse in percentuale, ad esempio 50% 0% indica il punto centrale superiore dell’elemento, mentre 100% 100% indica l’angolo in basso a destra. I punti devono essere separati da virgole e ne servono almeno 3.

R: -webkit-clip-path è usato per la compatibilità con alcuni ambienti basati su WebKit. Per migliorare la compatibilità, puoi mantenere sia la sintassi con prefisso sia quella standard.

R: Puoi selezionare i formati immagine più comuni come input; l’output supporta PNG, JPEG e WebP. PNG è ideale per mantenere le aree trasparenti, JPEG per generare file più piccoli e WebP per bilanciare dimensioni e qualità dell’immagine.

R: Lo strumento cercherà di mantenere il nome del file originale e sostituirà l’estensione in base al formato di output. Se esistono file con lo stesso nome, aggiungerà un numero alla fine del nome del file per evitare che i risultati si sovrascrivano.