CSS clip-path

Arrastrar puntos polígono → código polygon()

Formas

4 points

Punto #1

X %

Y %

Editor (drag handles)

Preview

CSS

clip-path: polygon(50.0% 0.0%, 100.0% 50.0%, 50.0% 100.0%, 0.0% 50.0%);

Cómo usar

Seleccione una forma preajustada o comience con el polígono predeterminado en el editor SVG.
Arrastre los identificadores circulares para reposicionar cada vértice del polígono.
Agregue un nuevo punto (insertado en el punto medio del borde seleccionado) o quite el punto seleccionado.
Ajuste con precisión porcentajes X/Y exactos en las entradas de coordenadas.
Copie el clip-path CSS generado y péguelo en su hoja de estilos.

Ejemplos

Arrastrar un identificador de triángulo a 50% 0%, 0% 100%, 100% 100% produce clip-path: polygon(50.0% 0.0%, 0.0% 100.0%, 100.0% 100.0%).
Agregar un punto en el borde derecho de un rectángulo y tirarlo hacia afuera crea una forma de flecha en tiempo real.

Verifica las salidas antes de usar en producción. Sin garantía — ver Términos.