Question 1

¿Qué es CSS clip-path?

Accepted Answer

CSS clip-path es una propiedad que define una región de recorte para un elemento. Solo el contenido dentro de la forma especificada es visible, mientras que el resto está oculto. Se utiliza para crear formas no rectangulares para elementos como imágenes, divs y botones sin necesitar SVG ni marcado adicional.

Question 2

¿Qué formas puedo crear con clip-path?

Accepted Answer

CSS clip-path admite polygon (formas personalizadas de múltiples puntos), circle, ellipse e inset (rectangular con esquinas redondeadas opcionales). El tipo polygon es el más flexible, permitiendo triángulos, diamantes, hexágonos, flechas y prácticamente cualquier forma definida por una serie de puntos en porcentaje.

Question 3

¿Cómo funcionan los valores en porcentaje en clip-path?

Accepted Answer

Los valores en porcentaje en clip-path son relativos a las dimensiones propias del elemento. 0% 0% es la esquina superior izquierda, 100% 0% es la superior derecha, 50% 50% es el centro y 100% 100% es la inferior derecha. Esto hace que las formas de clip-path sean responsivas al tamaño del elemento.

Question 4

¿Afecta clip-path al diseño del elemento?

Accepted Answer

No, clip-path solo afecta lo que es visible — no cambia el modelo de caja ni el diseño del elemento. El elemento sigue ocupando su espacio original. Si necesitas cambiar el diseño junto con el recorte, considera usar shape-outside con float para efectos de ajuste de texto.

Question 5

¿Cómo animo clip-path?

Accepted Answer

clip-path puede animarse usando transiciones CSS o animaciones de fotogramas clave entre dos formas compatibles (p. ej., polygon con el mismo número de puntos). Agrega transition: clip-path 0.3s ease para habilitar la transformación suave de formas al pasar el cursor o al cambiar de estado.

Generador CSS Clip-Path

Preguntas Frecuentes

Comments & Feedback