Herramientas · CSS · Generador de clip-path
Generador de clip-path
Crea una forma de recorte CSS clip-path: polígono, círculo, elipse o rectángulo interior, con una vista previa en vivo, y copia el código.
Añade un archivo y ejecuta la herramienta.
Tu archivo está listo.
Prueba otro archivo, o inténtalo de nuevo.
Ajustes
Ajusta la configuración de abajo. El resultado se actualiza sobre la marcha.
Funciona por completo en tu navegador. No se sube ningún archivo.
Funciona por completo en tu navegador. Nada se sube nunca a un servidor.
Cómo funciona
Elige un tipo de forma (polígono, círculo, elipse o rectángulo interior), o un preajuste de polígono.
Arrastra los puntos en la vista previa, o usa los controles deslizantes, para afinar la forma.
Copia el CSS clip-path generado.
Preguntas frecuentes
No. La forma se genera y se muestra por completo en tu navegador - esto es solo matemáticas y texto CSS.
Sí. Abre Coordenadas de los puntos y usa Añadir un punto - divide el lado más largo - o el botón Quitar de cualquier fila. Un polígono conserva al menos tres puntos.
Algunas combinaciones, como un rectángulo interior que cubre toda la caja, son CSS válido que recorta todo. No es un error, solo un valor legal pero degenerado.
Sí. Usa Tab para llegar a un punto y las flechas para moverlo - Mayús para un paso mayor.
Guías
Una mirada más de cerca a problemas concretos que resuelve esta herramienta.
Why Shape Elements With CSS clip-path Instead of Cropped Images
A hexagon avatar or an angled hero can be baked into the image file, or cut by the browser at render time. clip-path does the cutting in CSS, which keeps one source image and one line to change, with a few side effects worth knowing first.
Leer la guíaHow to Build a CSS clip-path Polygon by Dragging Points
Start from one of eight presets, drag the points into place, add or remove points as the shape needs, and copy a polygon() value that scales with any box. Here is the process, with the limits the tool actually has.
Leer la guíaMaking a Hexagon Profile Photo With CSS clip-path
A hexagon avatar looks like one line of CSS, then the hexagon comes out squashed, the border vanishes on four sides and the shadow is gone. Here is the whole job, including the three fixes.
Leer la guía
Comentarios