clip-path con polygon() y circle()

clip-path recorta el área visible de un elemento con una forma especificada. Todo lo que queda fuera de la forma se vuelve invisible, pero sigue ocupando espacio en el diseño.

Recorte un elemento con forma circular. El argumento es el radio:

Recorte el elemento con forma de elipse especificando el radio del eje x, el radio del eje y y, opcionalmente, la posición del centro:

Es la función clip-path más potente. Defina un polígono enumerando pares de coordenadas x,y:

Recorte el elemento con forma rectangular y, opcionalmente, esquinas redondeadas. Los argumentos son las distancias de inserción:

Cree transiciones angulares entre las secciones de una página:

Un clip-path con el mismo número de puntos puede interpolarse para crear animaciones de revelado y transformación:

Para formas redondeadas sencillas, border-radius es mejor: funciona con el fondo y el borde. Utilice clip-path cuando necesite formas no rectangulares que border-radius no pueda conseguir.

path() acepta una cadena de ruta SVG para crear formas arbitrarias:

clip-path crea un nuevo contexto de apilamiento y puede provocar un repintado en cada fotograma cuando se anima. Animar clip-path es más costoso que animar transform u opacity; utilícelo con cuidado.

El sistema de coordenadas de clip-path es el cuadro de borde del elemento (o el cuadro de margen en SVG). Los porcentajes son relativos a las dimensiones del elemento.

¿Qué función de clip-path crea una forma irregular no rectangular definida mediante pares de coordenadas?

clip-path recorta elementos con formas geométricas. circle() y ellipse() crean recortes redondeados. polygon() define cualquier forma con varios vértices. inset() recorta el elemento con forma rectangular y permite redondear las esquinas. Anime formas polygon con el mismo número de puntos para crear revelados llamativos. Utilice path() para crear formas arbitrarias basadas en SVG.