Generador de CSS Clip-Path

CSS clip-path acepta una función polygon() compuesta por cualquier número de pares de coordenadas x/y, lo que permite recortar un recuadro con siluetas que van mucho más allá de los simples rectángulos y círculos que la mayoría utiliza. La dificultad está en que teclear esas coordenadas a mano es tedioso y casi imposible de acertar para cualquier cosa más compleja que un triángulo básico; este generador convierte esa lista de coordenadas en un conjunto de puntos arrastrables sobre una vista previa en vivo, para que la forma que ves sea siempre la que el CSS produce.

Cada punto de la vista previa se almacena como un porcentaje del ancho y alto del recuadro, que es exactamente cómo funciona internamente clip-path: polygon(): una forma construida así mantiene sus proporciones correctas sin importar el tamaño final del elemento en una página real, desde una pequeña máscara para icono hasta un banner de ancho completo. Arrastra cualquier punto para remodelar el contorno, haz clic cerca de un borde para añadir un nuevo punto justo donde hiciste clic, o haz doble clic sobre un punto existente para borrarlo; el editor siempre conserva al menos tres puntos, ya que un polígono no puede existir con menos.

Las seis formas predefinidas están elegidas para demostrar que clip-path puede lograr más que formas convexas: la estrella y la flecha se basan en ángulos entrantes que apuntan hacia dentro, el bocadillo de diálogo extrae una cola triangular de un rectángulo común, y el talón de billete mella dos ranuras en lados opuestos tal como luce un billete perforado real. Carga cualquier predefinido y sigue arrastrando a partir de ahí; nada en el editor te obliga a quedarte con la forma inicial.

Sube tu propia imagen para previsualizar el clip-path sobre contenido real en lugar de un simple recuadro, o sáltate la carga por completo y la vista previa utilizará un patrón de rayas para que el recorte siempre se distinga con claridad. Como todas las herramientas de este sitio, todo se ejecuta localmente en el navegador: ninguna imagen sale jamás de tu equipo, y el generador sigue funcionando sin conexión una vez que la página ha cargado.