Generador de clip-path

Cómo usar el generador de clip-path

1. Elige una Forma: Polígono, Círculo, Elipse o Inset. La capa atenuada muestra el elemento completo y la capa brillante, lo que queda visible tras el recorte.
2. Arrastra los puntos del editor. En un polígono, cada punto es un vértice; haz clic en cualquier parte del área para añadir un punto en el borde más cercano. En un círculo o una elipse, arrastra el centro y los puntos del radio. En un inset, arrastra los cuatro puntos de los bordes.
3. Afina los valores en los campos de abajo: la lista de Puntos (X e Y en porcentaje, con Eliminar y Añadir punto) para los polígonos, o los campos Radio, Centro X, Centro Y, Arriba, Derecha, Abajo, Izquierda y Esquinas redondeadas (px) para las demás formas.
4. Ve más rápido con los Ajustes predefinidos: triángulo, trapecio, paralelogramo, rombo, pentágono, hexágono, octógono, bisel, estrella, cruz, flechas, chevrón, bocadillo, círculo, elipse e inset.
5. Marca Ajustar al 5 % para obtener valores redondos, y Añadir -webkit-clip-path (Safari antiguo) si todavía das soporte a Safari 13.0 o anterior.
6. Si quieres, suelta una foto en Imagen de fondo (opcional) para ver la forma sobre tu propia imagen. El archivo nunca se sube.
7. Copia el Código CSS con Copiar.

Teclado: selecciona un punto, muévelo con las flechas (1 %, o 10 % con Mayús) y pulsa Supr para eliminar un punto del polígono. Un polígono conserva siempre al menos tres puntos.

Las funciones de forma de clip-path

clip-path oculta todo lo que queda fuera de una forma. El elemento mantiene su tamaño en el diseño; solo se recortan la parte pintada y la zona en la que se puede hacer clic.

• polygon(x1 y1, x2 y2, …) une los puntos en orden y cierra la forma. polygon(50% 0%, 100% 100%, 0% 100%) es un triángulo que apunta hacia arriba. Las coordenadas parten de la esquina superior izquierda del elemento.
• circle(r at cx cy): circle(50% at 50% 50%) es el mayor círculo centrado en el elemento. Un radio en porcentaje es relativo a la diagonal del elemento dividida entre √2, así que solo equivale a una parte del ancho en elementos cuadrados.
• ellipse(rx ry at cx cy): el radio horizontal es una parte del ancho y el vertical, una parte del alto.
• inset(top right bottom left round radius) recorta un rectángulo dentro de los bordes, con la misma forma abreviada de uno a cuatro valores que los márgenes y esquinas redondeadas opcionales.

Esta herramienta escribe porcentajes, así que la forma se escala con el elemento, sea cual sea su tamaño.

Consejos para lograr buenas formas

• El orden de los puntos del polígono importa: recorrer el contorno en el sentido de las agujas del reloj (o en el contrario) evita formas cruzadas en «pajarita».
• Dos formas con el mismo número de puntos se pueden animar: transition: clip-path 0.4s transforma suavemente un hexágono en otro. El navegador no puede interpolar entre polígonos con distinto número de puntos.
• clip-path también recorta box-shadow y los bordes. Para darle sombra a una forma recortada, aplica filter: drop-shadow() a un elemento padre.
• Las zonas recortadas no reciben clics ni hover, algo muy práctico para botones con formas irregulares.