Elige una forma, arrastra los puntos o escribe sus porcentajes X e Y, y copia el clip-path generado. La vista previa usa las mismas declaraciones que copias.
Se ejecuta localmente en tu navegadorEl editor trabaja sobre una única figura polygon() y escribe las dos declaraciones que necesita una hoja de estilos: la línea con prefijo -webkit-clip-path y la línea estándar clip-path. Cinco formas predefinidas cubren los casos habituales —Triángulo con 3 puntos, Rombo con 4, Hexágono con 6 (la predeterminada), Estrella con 10 y Chevron con 6— y cada punto se mueve arrastrando su tirador en el lienzo o escribiendo un porcentaje X e Y.
El lienzo es una vista previa real de ese mismo CSS: el polígono se aplica al elemento mientras arrastras y el contador de la cabecera indica cuántos puntos tiene la figura. Las coordenadas son porcentajes de la caja del propio elemento, así que la forma conserva sus proporciones al aplicarla a un elemento de otro tamaño.
El bloque tiene una sola regla: .clipped-element con una línea -webkit-clip-path y otra clip-path, ambas con el mismo valor polygon() formado por pares de porcentajes x y separados por comas. No se escribe nada más: ni prefijos fuera de -webkit-, ni variables CSS, ni un selector para tu marcado, así que cambia .clipped-element por la clase que uses de verdad.
Los pares son porcentajes de la caja de referencia, que en un elemento que no la cambia es su caja de borde. Por eso la figura se escala con el elemento y no depende del tamaño en píxeles del lienzo de vista previa.
La vista previa muestra lo que hace tu navegador con el valor; la página no incluye tabla de compatibilidad ni detecta soporte. El recorte poligonal básico funciona en Chrome, Edge, Firefox y Safari actuales y la línea -webkit- mantiene vivos los Safari y iOS antiguos, pero comprueba los motores que usa tu público antes de que la forma signifique algo: un navegador sin soporte pinta la caja completa.
El recorte no es solo visual: un clic fuera del polígono no alcanza al elemento, algo que importa cuando la figura recortada es un enlace o un botón y su superficie pulsable debe coincidir con lo que se ve.
Un polígono necesita tres puntos y admite doce. Añadir punto parte la arista posterior al punto activo, Eliminar punto borra el activo y la línea de estado informa de ambos límites en el idioma de la página. La lista Punto activo sigue el orden de creación, que es también el orden de los pares dentro de polygon().
Todo se ejecuta dentro de la página: la figura la calcula el navegador, no se sube ningún valor y la herramienta sigue funcionando sin conexión. El elemento de la vista previa usa la misma declaración que muestra el panel de código, así que no hay una segunda implementación que pueda discrepar del CSS copiado.