NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Función CSS : polygon()

14 de Junio del 2018 por Josep Antoni Bover. 48 visitas, 0 comentarios, 0 votos
Categorías : CSS.
La web está en segundo plano, animación en pausa.
Cargando animación...

Esta función recorta el área visible del objeto utilizando el polígono especificado.

Solo se puede utilizar en la propiedad clip-path.


Sintaxis

Animación
polygon( X Y, X Y, X Y, ... );

Para definir el polígono debes definir 3 o más puntos, cada punto debe tener un valor para la X y otro para la Y.

Todas las coordenadas deben ser un valor positivo utilizando cualquier tipo de unidad de tamaño relativa válida. Para más información consulta la Referencia CSS : Unidades.

Por ejemplo puedes ver los pasos de la animación de la derecha (10 puntos) :

1
2
3
4
5
clip-path:polygon( 0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%, 0% 60%, 0% 42%, 0% 25%); /* Bocadillo */
clip-path:polygon( 40% 0%, 40% 20%, 100% 20%, 100% 40%, 100% 60%, 100% 80%, 70% 80%, 40% 80%, 40% 100%, 0% 50%); /* Flecha izq. */
clip-path:polygon( 50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%); /* Decágono */
clip-path:polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); /* Estrella */
clip-path:polygon( 0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%); /* Ventana */
Se puede aplicar una animación o una transición con la función polygon siempre que todos los pasos tengan el mismo número de puntos.

Código de ejemplo



Compatibilidad

Esta propiedad es soportada por todos los navegadores compatibles con CSS3.

Soportado a partir de la versión 24
Soportado a partir de la versión 3.5
Soportado a partir de la versión 12
NO soportado
NO soportado

Documento modificado por última vez : 14/06/2018
Ejemplo modificado por última vez : 05/06/2018

Enlaces relacionados