La propiedad clip-path en CSS para seleccionar regiones a mostrar en elementos

La propiedad clip-path en CSS permite definir qué parte de un elemento HTML se muestra y qué parte queda oculta, utilizando formas geométricas o rutas personalizadas. Gracias a ella podemos dejar atrás el diseño basado únicamente en rectángulos y crear recortes visuales mucho más atractivos, especialmente en imágenes, cards y elementos interactivos.

clip-path, es como una “ventana”: todo lo que queda dentro de la forma se renderiza, y todo lo que queda fuera simplemente desaparece.

Anteriormente vimos como usar los posicionamientos en CSS.

Qué es la propiedad clip-path en CSS

clip-path define una ruta de recorte que delimita el área visible de un elemento. Cualquier parte del contenido que quede fuera de esa ruta no se renderiza.

Para qué sirve clip-path y cuándo usarlo

• Crear recortes circulares, triangulares o poligonales.
• Diseñar interfaces más dinámicas sin imágenes editadas.
• Aplicar efectos visuales en hover y animaciones.
• Sustituir técnicas antiguas basadas en imágenes o SVG complejos.
   

Diferencias entre clip y clip-path (propiedad obsoleta)

Durante un tiempo existió la propiedad clip, pero hoy está obsoleta. Solo permitía recortes rectangulares y requería posicionamiento absoluto.  

clip-path, en cambio:

• Soporta múltiples formas.
• Funciona con porcentajes y unidades flexibles.
• Se puede animar.
• Es compatible con SVG.

Por eso, hoy en día no tiene sentido usar clip.

Qué ocurre con el contenido que queda fuera del recorte

El contenido:

• No se muestra.
• No afecta al layout.
• Sigue existiendo en el DOM (solo está oculto visualmente).

Sintaxis y valores de la propiedad clip-path

La sintaxis básica es muy sencilla:

.elemento {
 clip-path: valor;
}

Valores posibles de clip-path

• none: no aplica ningún recorte.
• Formas geométricas: circle(), ellipse(), inset(), polygon().
• url(): referencia a un <clipPath> definido en SVG.

Uso de funciones de forma en clip-path

Las funciones de forma son el corazón de clip-path. Permiten definir recortes de manera flexible y precisa.

Coordenadas y sistema de referencia del recorte

Las coordenadas se calculan respecto al cuadro del elemento:

• El eje X va de izquierda a derecha.
• El eje Y va de arriba hacia abajo.
• Se pueden usar porcentajes o unidades absolutas.

Al trabajar con ejemplos reales, usar porcentajes facilita mucho que el recorte sea responsive.

Formas geométricas disponibles en clip-path

Veamos como definir múltiples formas geométricas:

Definiendo rectángulos con inset() y polygon():

clip-path: inset(10% 12% 14% 16%);

inset() crea rectángulos “recortando hacia dentro”.

También se puede lograr lo mismo con polygon() definiendo cuatro puntos.

inset() es ideal para recortes simples y polygon() cuando necesito más control.

Creando círculos con circle()

clip-path: circle(48% at 50% 50%);

Permite crear círculos centrados o desplazados. Es muy común para avatares o efectos spotlight.

Elipses y óvalos con ellipse()

clip-path: ellipse(50% 30% at center top);

Funciona igual que circle(), pero con radios distintos en X e Y.

Polígonos complejos con polygon()

clip-path: polygon(
 5% 5%,
 100% 0%,
 100% 75%,
 75% 75%,
 75% 100%,
 50% 75%,
 0% 75%
);

Aquí es donde clip-path brilla de verdad. Se pueden crear:

• Triángulos
• Estrellas
• Flechas
• Formas personalizadas

Para estos casos suelo apoyarme en generadores visuales como Clippy, porque definir puntos a mano puede ser tedioso.

Ejemplos prácticos de clip-path en imágenes

Imagen base y región de interés

Un truco que siempre recomiendo es usar una sola imagen base y modificar únicamente el clip-path. Así es mucho más fácil entender cómo afectan las coordenadas al resultado final.

Recorte rectangular aplicado a imágenes

clip-path: polygon(0% 57%, 100% 57%, 100% 100%, 0% 100%);

Recortes circulares y elípticos

clip-path: circle(48% at 78% 57px);

Recorte con polígonos personalizados

Este tipo de recortes es ideal para destacar zonas concretas de una imagen sin necesidad de edición previa.

La propiedad clip-path de CSS permite especificar regiones a cualquiera de los elementos existentes en HTML a través de formas geométricas como círculos, elipses, cuadrados, rectángulos y polígonos:

Una vez seleccionadas estas regiones, se procede a renderizarse según las formas seleccionadas:

A continuación, se presenta la tabla de contenido para este artículo en donde daremos los primeros pasos con los clip-path de CSS:

1. Seleccionando y renderizando la región de interés a través de los atributos
2. Ejemplos de imágenes con la propiedad clip-path
   1. Definiendo rectángulos con la propiedad clip-path
   2. Definiendo círculos con la propiedad clip-path
   3. Definiendo elipse con la propiedad clip-path
   4. Definiendo polígonos con la propiedad clip-path
3. Animaciones con la propiedad clip-path
   1. clip-path y animación
   2. clip-path, hover y animación

1.0 Seleccionando y renderizando la región de interés a través de los atributos

Existen varios valores que podemos usar para seleccionar regiones de interés de los elementos HTML; lo cual permite adaptarse fácilmente a las necesidades que tengamos:

En donde:

2.0 Ejemplos de imágenes con la propiedad clip-path

En esta sección veremos algunos ejemplos prácticos de cómo funciona la propiedad clip-path, para ello usaremos la siguiente imagen referencial:

Se usarán los prefijos -webkity -mozpara mantener la compatibilidad con la mayoría de los navegadores.

2.1 Definiendo rectángulos con la propiedad clip-path

Es posible seleccionar una sección rectangular de la imagen con el valor polygon establecido como valor a la propiedad clip-path en donde definiremos cuatro puntos con sus coordenadas "x" y "y" (un punto para cada una de las esquinas):

El CSS

clip-path: polygon(0% 57%, 100% 57%, 100% 100%, 0% 100%); 

Al establecer el CSS anterior obtenemos el siguiente resultado:

Un comportamiento similar se puede obtener con el valor inset; al establecer sus cuatros parámetros:

clip-path: inset(10% 12% 14% 16%);

2.2 Definiendo círculos con la propiedad clip-path

Ahora supongamos que deseamos seleccionar algún participante de la serie a través de una circunferencia empleando el valor circle de la propiedad clip-path podemos realizar esa tarea:

El CSS

clip-path: circle(48%, 78%, 57px);

2.3 Definiendo elipses con la propiedad clip-path

Ahora seleccionaremos la parte superior de la imagen empleando el valor ellipse de la propiedad clip-path:

El CSS

clip-path: ellipse(50%, 30%, 50%,28%); 

2.4 Definiendo polígonos con la propiedad clip-path

Podemos crear polígonos tan complejos como deseemos agregando tantos puntos ("x" y "y") como vértices deseemos que tenga el polígono:

El CSS

clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

3.0 Animaciones con la propiedad clip-path

También podemos emplear la propiedad clip-path en conjunto con otras propiedades de CSS como animation:

3.1 clip-path y animación

El CSS

	img.animacion1{
	  clip-path: polygon(0% 57%, 100% 57%, 100% 100%, 0% 100%);
	  animation: animation-clip-path 3s infinite;
              opacity:0.5;
	}
	@keyframes animation-clip-path {
	    from { clip-path: polygon(35% 57%, 41% 57%, 44% 100%, 35% 100%); opacity:0.5;}
	    to { clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%); opacity:1;
	}

3.2 clip-path, hover y animación

Y por supuestos podemos usar la pseudo class hover en el proceso; intenta posicionar el cursor encima de la siguiente imagen:

El CSS

	img.animacion2{
		clip-path: polygon(0% 57%, 100% 57%, 100% 100%, 0% 100%); 
	}
	img.animacion2:hover{
		clip-path: polygon(0% 57%, 100% 57%, 100% 100%, 0% 100%); /*personajes*/
		animation: animation-clip-path-hover 2s infinite;
	}
	@keyframes animation-clip-path-hover {
	  0% {
	    clip-path: polygon(0% 57%, 100% 57%, 100% 100%, 0% 100%); /*personajes*/
	  }
	  50% {
	    clip-path:polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
	  }
	  100% {
	    clip-path: polygon(0% 57%, 100% 57%, 100% 100%, 0% 100%); /*personajes*/
	  }
	}

Posiciona el cursor encima de la imagen.

Puedes visualizar y descargar todos los ejemplos dados hasta ahora en los siguientes enlaces:

Animaciones con la propiedad clip-path

Una de las partes más interesantes de clip-path es que se puede animar.

Animar clip-path usando @keyframes

img.animacion1 {
 clip-path: polygon(0% 57%, 100% 57%, 100% 100%, 0% 100%);
 animation: animation-clip-path 3s infinite;
 opacity: 0.5;
}
@keyframes animation-clip-path {
 from {
   clip-path: polygon(35% 57%, 41% 57%, 44% 100%, 35% 100%);
   opacity: 0.5;
 }
 to {
   clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
   opacity: 1;
 }
}

Transiciones combinando clip-path y opacity

Combinar ambas propiedades suaviza mucho el efecto visual.

clip-path y animaciones infinitas

Ideal para:

• Hero sections
• Banners animados
• Elementos decorativos

clip-path, hover e interacción con el usuario

Efectos hover usando clip-path

img.animacion2:hover {
 animation: animation-clip-path-hover 2s infinite;
}

Animaciones de recorte al pasar el cursor

Este tipo de interacción funciona especialmente bien en galerías o cards.

Esto es uno de los usos que más impacto visual genera con muy poco código.

• Casos de uso comunes
• Cards interactivas
• Portfolios
• Galerías de imágenes
• Secciones destacadas

clip-path con SVG y rutas personalizadas

• Uso de clip-path con SVG inline
  • Se puede definir un <clipPath> dentro de un SVG y reutilizarlo.
• Referenciar clipPath desde archivos SVG externos

  • clip-path: url(path.svg#shape);

• Limitaciones actuales de path()
  • La función path() permite rutas complejas, pero no es totalmente compatible en todos los navegadores, por lo que conviene usarla con cuidado.

Compatibilidad de clip-path con navegadores

Compatibilidad actual

Desde 2020, clip-path tiene soporte estable en los principales navegadores modernos.

Prefijos CSS y fallback

En proyectos reales, suelo añadir prefijos -webkit- para asegurar compatibilidad en navegadores basados en WebKit.

Recomendaciones para producción

• Usar porcentajes siempre que sea posible.
• Probar en varios navegadores.
• Definir un diseño aceptable sin clip-path como fallback.

Diferencias entre clip-path y mask en CSS

• Cuándo usar clip-path
  • Formas geométricas claras.
  • Recortes definidos.
  • Animaciones de forma.
• Cuándo usar mask-image
  • Transparencias parciales.
  • Gradientes.
  • Efectos más complejos a nivel de píxel.
• Recorte vs enmascaramiento
  • clip-path recorta, mask controla visibilidad por píxel. Son herramientas distintas para problemas distintos.

Preguntas frecuentes sobre clip-path en CSS

• ¿Se puede usar clip-path en texto?
  • Sí, se puede aplicar a cualquier elemento HTML, incluido texto.
• ¿clip-path afecta al layout?
  • No. Solo afecta a la renderización visual.
• ¿Se puede animar clip-path en todos los navegadores?
  • En navegadores modernos, sí. En otros, conviene probar.
• ¿Es recomendable usar clip-path en proyectos reales?
  • Sí, siempre que se use con criterio y se valide compatibilidad.

Conclusión

La propiedad clip-path en CSS es una herramienta potente, flexible y cada vez más utilizada. Permite crear diseños modernos, interactivos y visualmente atractivos sin depender de imágenes externas o JavaScript.

En mi caso, pasar de recortes estáticos a animaciones con clip-path cambió por completo la forma en la que diseño interfaces visuales en CSS.

Si quieres experimentar, lo mejor es probar, mover puntos y animar formas. Ahí es donde realmente se entiende su potencial.

Aprende a redondear las esquinas de los elementos HTML con SOLO CSS y sin imágenes.