Generador de clip-path CSS

Com utilitzar el generador de clip-path

1. Tria una Forma: Polígon, Cercle, El·lipse o Rectangle intern. La capa atenuada mostra l’element sencer; la brillant, el que continua visible després de retallar.
2. Arrossega els punts a l’editor. En un polígon, cada punt és un vèrtex; fes clic en qualsevol lloc de l’àrea per afegir un punt a la vora més propera. En un cercle o una el·lipse, arrossega el centre i els punts del radi. En un rectangle intern, arrossega els quatre punts de les vores.
3. Afina els valors als camps de sota: la llista de Punts (X i Y en percentatge, amb Elimina i Afegeix un punt) per als polígons, o els camps Radi, Centre X, Centre Y, Superior, Dreta, Inferior, Esquerra i Vores arrodonides (px) per a les altres formes.
4. Comença més de pressa amb els Predefinits: triangle, trapezi, paral·lelogram, rombe, pentàgon, hexàgon, octàgon, bisell, estrella, creu, fletxes, xevró, globus de diàleg, cercle, el·lipse i rectangle intern.
5. Marca Ajusta a 5 % per obtenir valors ordenats, i Afegeix -webkit-clip-path (Safari antic) si encara has de donar suport al Safari 13.0 o anterior.
6. Si vols, deixa una foto a Imatge de fons (opcional) per veure la forma sobre la teva pròpia imatge. El fitxer no es puja mai enlloc.
7. Copia el Codi CSS amb el botó Copia.

Teclat: posa el focus en un punt, mou-lo amb les tecles de fletxa (d‘1 % en 1 %, o de 10 % en 10 % amb Maj) i prem Supr per eliminar un punt del polígon. Un polígon conserva sempre almenys tres punts.

Les funcions de forma de clip-path

clip-path amaga tot el que queda fora d’una forma. L’element conserva la seva mida a la maquetació; només es retallen el dibuix i l’àrea on es pot fer clic.

• polygon(x1 y1, x2 y2, …) uneix els punts en ordre i tanca la forma. polygon(50% 0%, 100% 100%, 0% 100%) és un triangle apuntant cap amunt. Les coordenades comencen a la cantonada superior esquerra de l’element.
• circle(r at cx cy): circle(50% at 50% 50%) és el cercle més gran centrat a l’element. Un radi en percentatge és relatiu a la diagonal de l’element dividida per √2, de manera que només equival a una part de l’amplada en els elements quadrats.
• ellipse(rx ry at cx cy): el radi horitzontal és una part de l’amplada, i el vertical, una part de l’alçada.
• inset(superior dreta inferior esquerra round radi) retalla un rectangle a dins de les vores, amb la mateixa notació abreujada d’un a quatre valors que els marges i amb cantonades arrodonides opcionals.

Aquesta eina escriu percentatges, de manera que la forma s’escala amb l’element sigui quina sigui la seva mida.

Consells per aconseguir bones formes

• L’ordre dels punts d’un polígon importa: recórrer la vora en sentit horari (o antihorari) evita formes creuades, en forma de llaç.
• Dues formes amb el mateix nombre de punts es poden animar: transition: clip-path 0.4s transforma un hexàgon en un altre hexàgon de manera suau. El navegador no pot interpolar entre polígons amb un nombre diferent de punts.
• clip-path també retalla box-shadow i les vores. Per donar ombra a una forma retallada, posa filter: drop-shadow() en un element pare.
• Les àrees retallades no reben clics ni passades del ratolí, cosa que va bé per a botons de forma irregular.