CSS clip-path: Crear Formas Personalizadas

Que es clip-path

La propiedad CSS clip-path recorta un elemento segun una forma geometrica. Todo lo que queda fuera de la forma se oculta — invisible y no clicable. Es como un cortador de galletas digital que aplicas a cualquier elemento HTML.

Antes de clip-path, crear formas no rectangulares requeria imagenes PNG con transparencia, SVG complejos o hacks CSS con transforms y pseudo-elementos. clip-path reemplaza todo eso con una sola propiedad declarativa.

La propiedad esta soportada por todos los navegadores modernos. La excepcion notable es Internet Explorer, que no la soporta — pero IE ya no es un factor para la mayoria de los proyectos web actuales.

Funciones de Forma

circle()

clip-path: circle(50% at 50% 50%); crea un circulo perfecto en el centro del elemento. El primer parametro es el radio y at define el centro.

ellipse()

clip-path: ellipse(40% 60% at 50% 50%); crea una elipse con radios horizontal y vertical diferentes.

inset()

clip-path: inset(10% 20% 10% 20% round 15px); crea un rectangulo con margenes interiores y opcionalmente esquinas redondeadas.

polygon()

clip-path: polygon(50% 0%, 100% 100%, 0% 100%); crea un triangulo definiendo tres puntos. Cada par de valores es un vertice (x, y). Puedes agregar tantos puntos como necesites para formas complejas.

Formas Comunes

• Triangulo: polygon(50% 0%, 0% 100%, 100% 100%)
• Rombo: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
• Hexagono: Seis puntos regularmente espaciados. Perfecto para galerias en panal de abeja.
• Estrella: Diez puntos alternando entre radios internos y externos.
• Corte diagonal: polygon(0 0, 100% 0, 100% 80%, 0 100%) — un rectangulo con borde inferior en diagonal. Muy popular para secciones hero.

Animaciones con clip-path

clip-path es animable con transiciones CSS, siempre que ambos estados usen la misma funcion de forma con el mismo numero de puntos.

.card { clip-path: circle(0% at 50% 50%); transition: clip-path 0.6s ease; }
.card.visible { clip-path: circle(100% at 50% 50%); }

Esto crea una animacion de revelacion circular — el elemento se expande desde un punto hasta la visibilidad completa. La transicion funciona porque ambos estados usan la misma funcion (circle).

Para animaciones de poligonos, manten el mismo numero de vertices en ambos estados. Agrega vertices invisibles en la misma posicion que otros vertices para rellenar el conteo de puntos si es necesario.

Casos de Uso Concretos

• Imagenes de perfil: Recorta fotos en circulos, hexagonos o formas originales en lugar de usar border-radius.
• Secciones hero: Usa un poligono diagonal o de onda en la parte inferior de la seccion para una transicion no lineal con la siguiente seccion.
• Efectos hover: Revela contenido al pasar el cursor animando clip-path de circle(0%) a circle(100%).
• Galerias creativas: Recorta las imagenes de una galeria en formas hexagonales para un efecto de panal de abeja.

Genera clip-path Visualmente

Calcular coordenadas de poligonos a mano es tedioso. Nuestro Generador de Clip Path te permite dibujar formas visualmente — arrastra puntos, ajusta curvas, previsualiza el resultado en tu imagen — y exporta el CSS al instante.