¿Qué es clip-path y cuándo lo uso?
clip-path es una propiedad CSS que recorta un elemento a una forma dada. Pon `clip-path: polygon(50% 0, 100% 100%, 0 100%)` y un div plano se convierte en un triángulo. Cualquier cosa fuera de la forma desaparece.
Aquí obtienes presets listos (triángulo, hexágono, octágono, estrella, flecha, bocadillo de mensaje, rayo) más un editor interactivo. Pulsa en el área para añadir un punto, arrastra un punto para moverlo, doble clic para eliminar. Círculo y elipse tienen sus propios presets con dos handles arrastrables.
La salida es una línea CSS `clip-path: ...` lista para copiar que pegas en tu hoja de estilos.
Cómo usar
- Elige un preset de la columna derecha (triángulo, estrella, flecha, bocadillo). Cada uno viene con vértices listos para afinar.
- Arrastra cualquier punto blanco para moverlo. Las posiciones están en porcentajes (0-100%) así que la forma escala con el elemento.
- Pulsa en un área vacía para añadir un nuevo vértice (solo modo polygon). Útil para formas custom avanzadas.
- Doble clic en un vértice para eliminarlo. Mínimo 3 vértices (triángulo).
- Copia el CSS resultante y pégalo en el estilo de tu elemento.
Cuándo ayuda
Clip-path es una herramienta estándar en diseño web moderno desde 2018 (soporte en todas partes). En vez de exportar una imagen para cada forma inusual, lo haces puramente en CSS:
- Divisor de sección diagonal (una línea inclinada cortando entre secciones). Un elemento clásico en portfolios y landings SaaS.
- Hero con una foto recortada a no-rectángulo. Hexágono en vez de rectángulo es un fuerte gancho visual.
- Avatares con forma hexagonal (Discord y Slack tienen algo similar).
- Tarjeta promocional con forma de tag (rayo, flecha). Más llamativa que un rectángulo.
- Bocadillo de chat sin dibujar la cola con un pseudo-elemento ::after.
- Animación reveal: `transition: clip-path 0.5s`, valor pequeño a valor grande da un efecto wipe-in.
- Tarjeta con una esquina recortada: clásico en UI sci-fi.
Para añadir una sombra bajo una forma recortada, usa `filter: drop-shadow()` (box-shadow no sigue clip-path). Para formas orgánicas más suaves mira el generador border-radius.