Categoria: Sviluppo
Generatore di CSS clip-path
Scegli una forma e copia il suo valore clip-path
Scegli una forma, da un cerchio o un'ellisse a un esagono, una freccia o un fumetto, regola quanto si ritrae dai bordi, e copia il valore clip-path risultante con un'anteprima dal vivo.
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
Tutto ciò che c'è in questa pagina viene elaborato nel tuo browser. Niente viene caricato.
A cosa serve
Scrivere a mano un poligono clip-path significa tracciare la posizione percentuale di ogni punto e immaginare come si collegano, il che è lento da modificare per qualsiasi cosa oltre un semplice triangolo. Questo strumento include un set di forme comuni come elenchi di punti già pronti, più un unico controllo di rientro che scala ogni punto verso il centro allo stesso modo per qualsiasi forma, così puoi visualizzare in anteprima e copiare un clip-path utilizzabile senza fare tu stesso la geometria.
Come si usa
- Scegli una forma.
- Regola il rientro per ingrandirla o rimpicciolirla all'interno del suo riquadro.
- Copia la dichiarazione clip-path.
Privacy
Questo strumento funziona interamente nel tuo browser. Quello che inserisci non viene mai caricato, salvato o condiviso: chiudendo la scheda sparisce.
Domande frequenti
- Perché cerchio ed ellisse si comportano diversamente dalle altre forme?
- circle() ed ellipse() accettano un raggio, quindi lì il rientro riduce direttamente il raggio, mentre le forme poligonali scalano ogni punto verso il centro della stessa percentuale.
- clip-path influisce sul layout o solo su ciò che è visibile?
- Solo su ciò che è visibile. L'elemento mantiene il suo riquadro originale ai fini del layout; clip-path nasconde solo le parti fuori dalla forma, allo stesso modo in cui overflow: hidden nasconde il contenuto fuori da un riquadro.
- Viene inviato qualcosa a un server?
- No. I punti della forma sono calcolati nella pagina a partire dalla forma e dal rientro che scegli, ed è per questo che l'anteprima si aggiorna all'istante.