Propiedad CSS : clip-path
Esta propiedad permite recortar el área visible de un objeto, de forma que el navegador incluso es capaz de utilizar una figura SVG (path) para especificar la figura de un objeto.
Sintaxis
clip-path: Valor;
A continuación tienes la lista de valores posibles :
none
No aplica ninguna máscara al objeto / Muestra el objeto tal cual. (valor por defecto)
url()
Especifica que el objeto tomará el área definida de un grupo de objetos dentro de un svg definido con una ID.
Por ejemplo :
clip-path:url(mi_archivo.svg#id_grupo); /* SVG externo */
inset()
El área a mostrar se recortará partiendo de los valores especificados para formar un rectángulo. Los valores se pueden especificar con cualquier tipo de unidad de tamaño relativa válida. Para más información consulta la Referencia CSS : Unidades.
El rectángulo inicial es el objeto completo, y a este se le restan los valores especificados
Si especificamos solo un valor, se aplicará a los 4 costados.
Si especificamos 2 valores, el primer valor se asignará a top / bottom, y el segundo valor a left / right.
Si especificamos 3 valores, el primer valor se asignará al top, el segundo al right, y el tercero al bottom.
Si especificamos 4 valores, el primer valor se asignará al top, el segundo al right, y el tercero al bottom, y el cuarto al left.
clip-path:inset(10px); /* 10 píxeles menos para el top, bottom, left, right */clip-path:inset(10px 20px); /* 10 píxeles menos para el top y bottom, 20 píxeles para el left y right */clip-path:inset(10px 20px, 30px); /* 10 píxeles menos para el top, 20 píxeles para el left y right, 30 píxeles para el bottom */clip-path:inset(10px 20px, 30px, 40px); /* 10 píxeles menos para el top, 20 píxeles para el right, 30 píxeles para el bottom, 40 píxeles para el left */
circle()
El área a mostrar será un círculo. El primer valor es el radio y no es opcional, y luego se puede especificar la posición inicial añadiendo at X Y
.
El radio debe ser un valor positivo utilizando cualquier tipo de unidad de tamaño relativa válida.
Las coordenadas de inicio se pueden especificar con cualquier tipo de unidad de tamaño relativo válido, tanto positivo como negativo.
Para más información sobre unidades de tamaño relativo, consulta la Referencia CSS : Unidades.
Por ejemplo :
clip-path:circle(5px); /* 5 píxeles de radio */clip-path:circle(10% at 5px 10px); /* 10% de radio empezando 5 píxeles a la derecha y 10 desde arriba */clip-path:circle(50px at 25% 75%); /* 50 píxeles de radio empezando un 25% a la derecha y un 75% desde arriba */
ellipse()
El área a mostrar será un ellipse. Los primeros valores son el radio X y el radio Y y no son opcionales, y luego se puede especificar la posición inicial añadiendo at X Y
.
Los radios deben ser un valor positivo utilizando cualquier tipo de unidad de tamaño relativa válida.
Las coordenadas de inicio se pueden especificar con cualquier tipo de unidad de tamaño relativo válido, tanto positivo como negativo.
Para más información sobre unidades de tamaño relativo, consulta la Referencia CSS : Unidades.
Por ejemplo :
clip-path:ellipse(6px 3px); /* 6 píxeles de radio X y 3 píxeles de radio Y */clip-path:ellipse(10% 30% at 5px 10px); /* 10% de radio X y 30% de radio Y, empezando 5 píxeles a la derecha y 10 píxeles desde arriba */clip-path:ellipse(500px 50% at 0% 100px); /* 500px de radio X y 50% de radio Y, empezando 0% a la derecha y 100 píxeles desde arriba */
polygon()
El área a mostrar será un polígono. 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 :
clip-path:polygon(50% 0%, 0% 100%, 100% 100%); /* Triangulo */clip-path:polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); /* Trapezoide */clip-path:polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); /* Cruz */
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 */
Área de partida
En la MDN (en inglés, que es la más completa) se menciona que se puede especificar un área de partida (basic-shape) desde donde se calculará el clip-path. SOLO Para firefox (de momento) podemos especificar el área de partida para la función inset. Pero según mis pruebas parece que no funciona con las funciones cirle
, ellipse
, y polygon
. Por lo que parece que estos parámetros solo sirven para la función inset()
fill-box | Utiliza el área del objeto como referencia. |
stroke-box | Utiliza el área del trazo como referencia. |
view-box | Utiliza el viewport del SVG como referencia. |
margin-box | Utiliza el área del margen del objeto como referencia. |
border-box | Utiliza el área del borde del objeto como referencia. |
padding-box | Utiliza el área del relleno del objeto como referencia. |
content-box | Utiliza el área del contenido del objeto como referencia. |
inset
, o más adelante también se podrá utilizar con circle
, ellipse
y polygon
.Por destacar
La propiedad clip-path
se puede utilizar para crear transiciones y animaciones. Existen varias limitaciones, la más importante es que no se pueden combinar funciones, es decir no podemos hacer una transición de la función circle
a la función polygon
. En definitiva, para realizar una transición / animación se tiene que utilizar siempre la misma función en todos los pasos.
Además si queremos animar un polígono, todas las fases de la animación deben tener el mismo número de puntos / coordenadas. Es decir, no podemos animar un polígono de 8 puntos a un polígono de 10 puntos...
.Objeto {transition:0.4s; /* Transición de 0.4 segundos */clip-path:inset(10px); /* desde 10 píxeles */}.Objeto:hover {clip-path:inset(20px); /* hasta 20 píxeles */}
inset(10px)
a circle(20px)
, la transición no se ejecutará por tratarse de distintas funciones.Para la función
polygon
hay que especificar el mismo número de coordenadas en cada paso para que funcione la animación / transición.
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 |
Ejemplo modificado por última vez : 30/12/2020