clip-path CSS
Gratis, sin registro, funciona en tu navegador.
En lugar de dibujar la forma, úsala para recortar otra cosa. Un `clipPath` en el documento más una propiedad CSS convierte una imagen, un vídeo o un div de color en la forma — que es cómo un blob se convierte en una máscara de avatar y no en un fondo.
Una exportación de clip-path CSS, recortada a las primeras líneas
<svg width="0" height="0" style="position:absolute">
<defs>
<clipPath id="shape-clip" clipPathUnits="userSpaceOnUse">
<path d="M100 38L153.69 69L153.69 131L100 162L46.31 131L46.31 69Z"/>
</clipPath>
</defs>
</svg>
/* The element must be 200×200 for the clip to line up. */
.clipped {
width: 200px;
height: 200px;
clip-path: url(#shape-clip);
}Lo que conviene saber
- El elemento conserva su contenido: esto recorta una fotografía en vez de ponerse detrás de ella.
- Necesita tanto el bloque `<svg>` en línea como la regla CSS: la propiedad referencia el clipPath por su id.
- El elemento tiene que coincidir con el espacio de coordenadas del recorte, por eso la salida indica el tamaño.
- Cambia el id si usas más de un recorte en la misma página.
Compatibilidad de navegadores
Soportado en todos los navegadores actuales. `clip-path: url(#id)` referenciando un clipPath en línea es la forma más amplia: más que las sintaxis de función `path()` y `shape()`, que son más nuevas y no merecen el riesgo cuando esto no cuesta nada más.
Tamaño en todos los preajustes
Todos los preajustes que este formato puede expresar, medidos tal como los emite el generador. El más pequeño es Hexágono con 369 bytes; el mayor es Salpicadura con 859 bytes. El número de puntos es lo que marca la diferencia: cada punto extra añade un segmento cúbico completo de coordenadas.
| Formato | Tamaño |
|---|---|
| Hexágono | 369 B |
| Cristal | 374 B |
| Gema facetada | 400 B |
| Picos de montaña | 423 B |
| Triángulo redondeado | 435 B |
| Barrido | 438 B |
| Zigzag marcado | 456 B |
| Onda profunda | 474 B |
| Borde de nube | 487 B |
| Onda de pie de página | 510 B |
| Arcos recortados | 511 B |
| Guijarro | 512 B |
| Onda suave | 514 B |
| Ondas en capas | 544 B |
| Blob suave | 548 B |
| Escalones | 550 B |
| Festón | 574 B |
| Blob orgánico | 620 B |
| Destello | 626 B |
| Onda orgánica | 670 B |
| Estrella | 769 B |
| Borde pixelado | 771 B |
| Flor | 775 B |
| Burbuja | 777 B |
| Ondulación | 847 B |
| Salpicadura | 859 B |
Con más detalle
La salida usa `clipPathUnits="userSpaceOnUse"` y te dice qué tamaño dar al elemento, en lugar de la forma `objectBoundingBox` que escalaría a cualquier elemento automáticamente. Eso parece la peor elección hasta que lo pruebas: `objectBoundingBox` exige que cada coordenada se exprese entre 0 y 1, lo que significa volver a emitir el trazado a otra escala y perder casi toda su precisión por el redondeo. Ser explícito con el tamaño mantiene la curva exactamente como se dibujó.
Preguntas
¿Qué formas funcionan como clip-path CSS?
Este formato cubre Onda, Blob. Es una restricción real y no una limitación de esta herramienta: cuando falta un generador en esa lista, el formato realmente no puede expresarlo, y ofrecerlo de todos modos te entregaría algo que dibuja en silencio la forma equivocada.
¿Cuánto ocupa una exportación de clip-path CSS?
Entre 369 y 859 bytes en los 26 preajustes que lo admiten. Menos puntos es la palanca que importa; la suavidad y el color no cuestan nada.
¿Puedo editarlo a mano después?
Sí. La salida es texto plano sin comentarios del generador, sin marcas identificativas y sin enlaces de vuelta aquí. Cambia los colores, renombra la clase o pega el trazado en tu propio SVG: nada de lo que viene después depende de que siga igual.
Cada cifra y cada forma de esta página se produjeron ejecutando el generador durante la compilación, así que describen la herramienta que estás a punto de usar y no una versión que existió una vez.