Sviluppatore / Forme CSS

Generatore di clip-path CSS: poligono, cerchio, ellisse e inset

Crea ritagli CSS con sei preimpostazioni per poligoni, punti trascinabili e regolabili con la tastiera, oltre ai controlli per cerchio, ellisse e inset. Visualizza un gradiente o un'immagine locale e copia il CSS in percentuale o in pixel.

Generatore di clip-path CSS: poligono, cerchio, ellisse e inset: Ritaglia l'anteprima secondo la forma selezionata senza modificare il file immagine sottostante. L'output in percentuale segue le dimensioni dell'elemento. L'output in pixel usa la larghezza e l'altezza di riferimento; l'anteprima visualizzata viene ridimensionata per adattarsi allo schermo. Funziona al 100% localmente nel browser, senza caricare file sul server.

Categoria
Strumenti per sviluppatori
Esecuzioni
Nel browser
Costo
Gratuito · senza registrazione
Disponibilità
Pronto all'uso
Banco di prova delle forme clip-pathElaborazione locale

Funziona interamente nel browser

Trascina un punto numerato, usa i suoi tasti freccia oppure inserisci le coordinate. Le coordinate sotto sono percentuali; l'output in pixel usa le dimensioni di riferimento.

Punto 1
Punto 2
Punto 3
Punto 4
Punto 5
Punto 6
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

Le forme in percentuale si ridimensionano con l'elemento. Le percentuali del cerchio usano la diagonale normalizzata; quelle dell'ellisse usano larghezza e altezza. Le coordinate in pixel sono fisse rispetto alle dimensioni di riferimento.

Ritaglio CSS

MDN clip-path: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path . Il ritaglio modifica la regione visibile senza cambiare il riquadro di layout dell'elemento.

Coordinate delle forme di base

W3C CSS Shapes Level 1, forme di base: https://www.w3.org/TR/css-shapes-1/#basic-shapes . Le coordinate dei poligoni e i raggi delle ellissi vengono calcolati rispetto al riquadro di riferimento; le percentuali dei cerchi usano la diagonale normalizzata. Le coordinate preimpostate e il gradiente sono elementi grafici originali.

Come usarlo

  1. Scegli una forma e una preimpostazione, poi imposta le dimensioni di riferimento.
  2. Trascina i punti del poligono, usa i tasti freccia o modifica le coordinate; regola i controlli per le altre forme.
  3. Scegli l'output in percentuale o in pixel e copia il CSS.

Privacy e limitazioni

Le anteprime delle immagini facoltative restano sul tuo dispositivo. Non viene caricato nulla.

Strumenti correlati

griglia CSSBox shadowFlexbox

Domande frequenti

Come posso modificare un punto senza trascinarlo?

Metti a fuoco la sua maniglia numerata e usa i tasti freccia, oppure inserisci le percentuali X e Y nell'elenco dei punti. I poligoni devono avere almeno tre punti.

Questo strumento esporta un'immagine ritagliata?

No. Esporta il CSS per un elemento HTML. L'immagine locale serve solo per l'anteprima.

Come vengono misurate le percentuali del cerchio?

CSS usa la diagonale normalizzata, sqrt((width squared + height squared) / 2), come riferimento per il raggio del cerchio. I raggi dell'ellisse usano separatamente larghezza e altezza.

Strumento gratuito · nel browser esecuzioni · senza account