Generador de clip-path CSS
Parta de una forma predefinida o mueva directamente los puntos del polígono para crear su propio recorte y obtenga el código CSS clip-path correspondiente, con vista previa en directo. Todo ocurre en su navegador, no se envía nada a un servidor.
Arrastre los puntos blancos sobre la vista previa para ajustar la forma, o añada y elimine puntos más abajo.
Cómo funciona
La propiedad CSS clip-path recorta un elemento según una forma definida por una lista de puntos, expresados como porcentaje de la anchura y la altura del elemento. Esta herramienta ofrece formas habituales listas para usar (triángulo, hexágono, cinta, estrella...) y también permite mover cada punto con el ratón o con el dedo para dibujar un recorte totalmente personalizado.
¿Por qué las coordenadas se expresan en porcentaje?
Usar porcentajes en lugar de píxeles hace que la forma recortada sea adaptable: se ajusta automáticamente al tamaño real del elemento al que se aplica, a diferencia de los valores fijos, que deformarían el recorte en otra pantalla.
¿Funciona clip-path con todas las imágenes y vídeos?
Sí, clip-path se aplica a la mayoría de los elementos HTML, incluidos imágenes, vídeos, botones y contenedores, en todos los navegadores modernos; no obstante, conviene dejar un margen de seguridad en su diseño, ya que el contenido situado fuera de la forma recortada se vuelve invisible pero sigue ocupando su lugar original.
Procesamiento 100% local: el trazado del polígono y el código generado permanecen íntegramente en su navegador.