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:

circle(<cx>, <cy>, <r>)

ellipse(<cx>, <cy>, <rx>, <ry>)

inset(<x1>, <y1>, <x2>, <y2>)

polygon(<x1> <y1>, <x2> <y2>, ..., <xn> <yn>)

En donde:

<cx> y <cy>	Centro de la coordenada "x" y de la coordenada "y" respectivamente
<rx> y <ry>	Radio de la coordenada "x" y de la coordenada "y" respectivamente
<x> y <y>	Coordenada "x" y "y" respectivamente

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 -webkit- y -moz- para 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:

Ademas les dejo la tabla que muestra la compatibilidad con los navegadores en el siguiente enlace.