Formas y recortes CSS

Por qué dominar la forma de la caja

Casi toda la personalidad visual de una interfaz vive en tres decisiones: color, tipografía y forma. Las dos primeras se cambian en una línea; la tercera es la que la mayoría no toca, y por eso casi todos los sitios se parecen. Un chaflán en las esquinas o un marco degradado distinguen una interfaz al instante y cuestan exactamente las líneas de CSS que ves abajo.

Cómo usar estas formas

1. Copia el CSS de la forma que quieras: cada una es independiente.
2. Aplica la clase al elemento. Las formas con clip-path exponen el tamaño del corte en una variable (--corte, --punta) para ajustarlo sin tocar el polígono.
3. Si la forma recorta contenido que no debería, dale más padding del lado del corte: el recorte no sabe qué hay dentro.

clip-path o border-radius: cuál usar

border-radius redondea y puede llegar hasta el blob orgánico con sus ocho valores, pero siempre produce curvas. clip-path corta en línea recta —chaflanes, flechas, muescas— y además recorta de verdad: lo que queda fuera del polígono desaparece, incluidos fondos e hijos. La contrapartida honesta: un elemento recortado con clip-path pierde su box-shadow (la sombra también se recorta). Si necesitas sombra, aplícala a un contenedor padre sin recorte.

Dónde encajan

• Portadas de juego o tecnología: chaflanes y esquinas técnicas dan el aire HUD sin una sola imagen.
• Pasos de proceso: el panel flecha encadena etapas apuntando a la siguiente.
• Secciones hero: el marco degradado enmarca la propuesta de valor con la paleta de la marca.
• Avatares y decoración: el blob suaviza retratos y fondos de icono.

Las demás categorías

La familia completa, cada una con sus piezas y su código: vidrio y neón, bento grid, botones y controles, tarjetas, formularios, datos y métricas y microinteracciones. Y si buscas generadores en vez de piezas hechas, están en Código web.

Preguntas frecuentes

¿clip-path funciona en todos los navegadores?

La sintaxis con polygon() que usan estas recetas funciona en todos los navegadores modernos desde hace años. Las funciones más nuevas (como path() o shape()) son otra historia, y por eso aquí no se usan.

¿Por qué mi elemento recortado perdió la sombra?

Porque clip-path recorta todo lo que se pinta fuera del polígono, y la sombra se pinta fuera. La solución es envolver el elemento en un contenedor y poner la sombra (o un drop-shadow de filter) en el contenedor, no en el elemento recortado.

¿Puedo animar un clip-path?

Sí, con transition o animation, siempre que el polígono de origen y el de destino tengan el mismo número de puntos. Es una de las técnicas de revelado más vistosas que existen en CSS puro.

¿Cómo hago el chaflán más grande o más pequeño?

Cambiando la variable --corte de la receta. El polígono está escrito con calc() sobre esa variable, así que un solo número ajusta las cuatro esquinas a la vez.

¿El borde degradado funciona con esquinas redondeadas?

Sí: el truco de los dos fondos (padding-box y border-box) respeta el border-radius, que es justo su ventaja sobre los métodos antiguos con pseudoelementos.

¿Qué es el blob de ocho valores?

border-radius acepta hasta ocho radios: cuatro horizontales y cuatro verticales separados por una barra. Con valores distintos entre sí, la caja deja de ser una elipse y se vuelve una forma orgánica. Cambia cualquiera de los ocho y tendrás tu propio blob.