Generador de ruta de clip CSS

CSS clip-path acepta una función polígono() formada por cualquier número de pares de coordenadas x/y, lo que significa que puede tallar una caja en formas mucho más allá de los simples rectángulos y círculos que la mayoría de la gente busca. El problema es que escribir esas coordenadas a mano es tedioso y casi imposible acertar para algo más allá de un triángulo básico: este generador convierte esa lista de coordenadas en un conjunto de puntos que se pueden arrastrar en una vista previa en vivo, por lo que la forma que ve es siempre la forma que produce el CSS.

Cada punto de la vista previa se almacena como un porcentaje del ancho y alto del cuadro, que es exactamente como funciona clip-path: polygon() bajo el capó: una forma construida de esta manera mantiene sus proporciones correctas sin importar el tamaño en el que termine el elemento en una página real, desde una pequeña máscara de icono hasta un banner de héroe de ancho completo. Arrastre cualquier punto para cambiar la forma del contorno, haga clic cerca de un borde para agregar un nuevo punto exactamente donde hizo clic o haga doble clic en un punto existente para eliminarlo; el editor siempre mantiene al menos tres puntos, ya que un polígono no puede existir con menos.

Los seis ajustes preestablecidos incluidos se eligen para demostrar que el clip-path puede hacer más que formas convexas: la estrella y la flecha dependen de ángulos reflejos que apuntan hacia adentro, el globo de diálogo talla una cola triangular en un rectángulo que de otro modo sería simple, y el talón del boleto mella dos muescas en bordes opuestos de la misma manera que se ve un boleto perforado real. Cargue cualquier ajuste preestablecido y siga arrastrándolo desde allí; nada en el editor lo bloquea en la forma inicial.

Cargue su propia imagen para obtener una vista previa de la ruta del clip con contenido real en lugar de un cuadro simple, o omita la carga por completo y la vista previa volverá a un patrón de rayas para que la forma cortada permanezca claramente visible en cualquier sentido. Como todas las herramientas de este sitio, todo se ejecuta localmente en el navegador: ninguna imagen sale de su dispositivo y el generador sigue funcionando sin conexión una vez que se ha cargado la página.