Imágenes con formas creativas usando clip-path

Diseño , CSS ,

Utilizar la propiedad clip-path de CSS es una manera sencilla de dotar de dinamismo a los diseños. Hace años nuestras posibilidades al trabajar con imágenes se limitaban a poner redondear los bordes. Clip-path nos permite utilizar infinidad de formas como máscara para las imágenes o para cualquier elemento HTML.

Definir la forma

La sintaxis es muy sencilla, clip-path permite los siguientes valores:

inset(top right bottom left): Forma un rectángulo interno circle(size at x y):
circle(size at x y): Forma un círculo que se puede posicionar utilizando coordenadas x e y
ellipse(size-x size-y at x y): Similar al anterior, pero formando una elipse.
polygon(x y, x y, n...): Dibuja un polígono con tantos lados como se le indique por cada par x e y
path(coordenadas): Dibuja la forma indicada por un SVG.

Unos cuantos ejemplos

Para obtener un simple círculo:

.clip-path: circle(200px)

O un círculo deplazado: clip-path:

circle(200px at 100px 50%)

Clip path circle

Un polígono sencillo de 4 lados:

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

Un polígono custom de 6 lados:

 polygon(25% 0%, 70% 17%, 100% 50%, 75% 100%, 29% 85%, 0% 50%)

clip path polygon

Una forma compleja a partir de un SVG:

path('M370.5,329Q343,418,248,404.5Q153,391,88,315.5Q23,240,90,167.5Q157,95,236,102.5Q315,110,356.5,175Q398,240,370.5,329Z')

clip path svg

Animaciones

No tenemos que limitarnos a una forma estática, ya que podemos crear animaciones utilizando keyframes, incluso podemos hacerlo combinando varios svg. por ejemplo:

.clip{
clip-path: path('M370.5,329Q343,418,248,404.5Q153,391,88,315.5Q23,240,90,167.5Q157,95,236,102.5Q315,110,356.5,175Q398,240,370.5,329Z') tra;
animation: animation-clip 3s infinite;
transform: translate(100 100)
}

@keyframes animation-clip{
0% { clip-path: path('M370.5,329Q343,418,248,404.5Q153,391,88,315.5Q23,240,90,167.5Q157,95,236,102.5Q315,110,356.5,175Q398,240,370.5,329Z'); }
50% { clip-path: path('M384,298Q307,356,238,360Q169,364,90,302Q11,240,80.5,162.5Q150,85,253,62Q356,39,408.5,139.5Q461,240,384,298Z'); }
100% { clip-path: path('M370.5,329Q343,418,248,404.5Q153,391,88,315.5Q23,240,90,167.5Q157,95,236,102.5Q315,110,356.5,175Q398,240,370.5,329Z'); }
}