Softonic

Generador de Clip Path CSS

Paso 1 / 2
Siguiente

Con clip-path puedes recortar cualquier elemento en forma de polígono, creando imágenes con forma, secciones asimétricas o burbujas de diálogo sin superposiciones SVG. Escribir las coordenadas de polygon() a mano invita a errores matemáticos. Este generador emite la declaración clip-path correcta para cuatro formas predefinidas: triángulo, rombo, trapecio y hexágono. Elige una forma, genera el código y cópialo.

Cómo construir un clip-path

  1. 1

    Elige la forma

    Elige una de las cuatro formas predefinidas: triángulo, rombo, trapecio o hexágono.

  2. 2

    Genera el CSS

    Pulsa el botón y la herramienta crea la regla `clip-path: polygon(...)` para la forma seleccionada.

  3. 3

    Copia la regla

    Copia el resultado y pégalo en tu hoja de estilos. Los porcentajes mantienen la forma adaptable al tamaño del elemento.

  4. 4

    Lee las coordenadas

    Cada par de números es un vértice: la posición x e y de esa esquina como porcentaje de la caja del elemento.

  5. 5

    Aplícalo

    `clip-path` funciona en cualquier elemento en todos los navegadores modernos, y la forma se adapta al tamaño del elemento.

Las cinco funciones de forma

Función Sintaxis Uso
inset() inset(10% 20% 10% 20% round 8px) Recorte rectangular con insets y esquinas redondeadas opcionales
circle() circle(50% at 50% 50%) Círculo
ellipse() ellipse(40% 25% at 50% 50%) Elipse
polygon() polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) Cualquier polígono
path() path("M0 0 L100 0 L50 100 Z") Datos de ruta SVG (soporte limitado)

Recortes de polígonos comunes

/* Hexágono */
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);

/* Rombo */
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

/* Chevron / flecha apuntando a la derecha */
clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%);

/* Paralelogramo */
clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);

/* Corte diagonal (sección de héroe moderna) */
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

La diagonal de la sección de héroe es probablemente la más utilizada de todas, da a una sección ese aspecto moderno angulado sin ningún SVG.

Animando clip-path

Clip-path se anima siempre que ambos estados tengan la misma función de forma con el mismo número de puntos. Un polígono de 4 vértices se anima suavemente a otro polígono de 4 vértices; añadir o eliminar vértices rompe la interpolación.

.card { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.card:hover { clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }

Usa esto para efectos de revelado, distorsiones sutiles al pasar el ratón, o transiciones de página.

Clip-path vs. overflow: hidden

overflow: hidden recorta al rectángulo de la caja (que puede ser redondeado con border-radius). clip-path recorta a cualquier forma que definas y recorta todo, incluyendo sombras y contornos. Si necesitas que las sombras permanezcan visibles fuera de la forma, clip-path no es lo que deseas.

filter: drop-shadow() puede volver a añadir una sombra que siga la forma en elementos clip-path, pero es más lento.

Rendimiento

Clip-path está acelerado por GPU en navegadores modernos, por lo que los clip-paths animados son suaves. La excepción es path() y polígonos muy complejos (40+ vértices) que vuelven a la representación por CPU en algunos navegadores.

Accesibilidad

Clip-path solo cambia lo que es visible. Los lectores de pantalla, el enfoque del teclado y los eventos del puntero siguen la caja completa del elemento, no la forma recortada. Si una imagen está recortada en una estrella, el texto alternativo se lee normalmente. Si un botón está recortado en un chevron, su área de clic es el rectángulo completo, no el chevron visible, lo que puede causar clics accidentales en un espacio aparentemente vacío.

Para botones con formas recortadas inusuales, establece el ancho/alto del elemento ajustado para que el área de clic coincida razonablemente bien con el área visible.

Preguntas frecuentes

Todos los navegadores modernos (Chrome, Firefox, Safari, Edge) soportan polygon(), circle(), ellipse() e inset(). path() es soportado en Chrome 88+, Firefox 97+ y Safari 13.1+. IE no soporta ninguno de ellos, pero su uso está por debajo del umbral para la mayoría de los sitios ahora.

Porque clip-path recorta sombras junto con todo lo demás. Usa filter: drop-shadow() en su lugar, sigue la forma recortada y mantiene la sombra visible.

Solo entre la misma función de forma con el mismo número de puntos. Un polígono con 4 puntos se anima a otro polígono con 4 puntos. Añadir o eliminar puntos, o cambiar entre funciones (de polígono a círculo), rompe la interpolación.

No, los eventos del puntero aún van al rectángulo completo del elemento. Un botón en forma de estrella tiene un área de clic rectangular, incluyendo las esquinas transparentes. Considera pointer-events: none en un ::before o usa elementos de tamaño ajustado si esto es importante.

Herramientas relacionadas

Referencia de la tabla ASCII

Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.

Referencia de caracteres HTML

Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Referencia de atajos de teclado

Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.

Formateador de JSON

Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.

Generador de Paletas de Color

Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.