0 FPS
Función CSS : polygon()
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 : 30/12/2020
Ejemplo modificado por última vez : 30/12/2020
Ejemplo modificado por última vez : 30/12/2020