Generador de clip-path

Cómo funciona

clip-path recorta un elemento hasta dejarlo en un contorno. Todo lo que queda fuera de la forma no se dibuja y no se puede clicar, lo que lo convierte en una forma real y no en la imagen de una forma, y funciona en cualquier elemento, incluidas imágenes y videos.

Porcentajes, no píxeles

Los puntos del polígono se dan como porcentajes del ancho y el alto del propio elemento, de modo que la forma se estira con el elemento en lugar de romperse a otro tamaño. Eso es lo que permite usarla en un diseño adaptable.

Los clics siguen la forma

Esta es la parte que distingue clip-path de una superposición decorativa. La región recortada no recibe eventos del puntero en absoluto, así que un botón triangular es triangular tanto para el ratón como para la vista.

Animar entre formas

Un polígono solo puede transformarse suavemente en otro polígono si ambos tienen el mismo número de puntos. El truco habitual es completar la forma más simple con puntos duplicados para que las cantidades coincidan: un triángulo escrito con cuatro puntos, dos de ellos en el mismo lugar, puede transformarse en un cuadrado.

La línea con -webkit-

Los navegadores actuales solo necesitan la propiedad sin prefijo. La copia con prefijo se incluye porque algunas versiones antiguas de Safari todavía la necesitan y dejarla no cuesta nada.

Lo que no hace

Recorta; no reorganiza el contenido. El texto de alrededor sigue tratando el elemento como su rectángulo original. Para que el texto se ajuste alrededor de una forma necesitas shape-outside, que usa la misma sintaxis.