Propiedad clip de CSS
La propiedad clip permite recortar un elemento posicionado mediante un rectángulo. El rectángulo se especifica como cuatro coordenadas: top, right, bottom, left. Estos valores definen desplazamientos desde el borde de relleno (padding) del elemento. El orden rect(top, right, bottom, left) sigue una dirección horaria comenzando desde la parte superior. Los cuatro lados pueden ser una longitud o auto. auto es el valor predeterminado.
La propiedad clip no funciona si el valor de la overflow propiedad está establecido en visible.
INFO
Si es posible, se puede usar la propiedad más reciente clip-path en su lugar, ya que la propiedad clip está obsoleta y se ha eliminado de la especificación de CSS. Para navegadores modernos, use clip-path: inset(top right bottom left) o clip-path: rect(...) como reemplazo directo.
| Valor inicial | auto |
|---|---|
| Se aplica a | Elementos posicionados absolutamente. |
| Heredado | No. |
| Animable | No. |
| Versión | CSS2 |
| Sintaxis DOM | object.style.clip = "rect(10px,40px,40px,10px)"; |
Sintaxis
Sintaxis de la propiedad clip de CSS
clip: auto | shape | initial | inherit;Ejemplo de la propiedad clip:
Ejemplo de la propiedad clip de CSS con valor auto
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
position: absolute;
clip: auto;
}
</style>
</head>
<body>
<img src="https://www.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3docs.com" />
</body>
</html>Resultado
En el siguiente ejemplo, el rectángulo recorta la imagen según los valores establecidos.
Ejemplo de la propiedad clip con el valor "rect":
Ejemplo de la propiedad clip de CSS con valor shape
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
position: absolute;
clip: rect(0px, 70px, 200px, 0px);
}
</style>
</head>
<body>
<img src="https://www.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3docs.com logo" />
</body>
</html>Valores
| Valor | Descripción | Probar |
|---|---|---|
| auto | No recorta un elemento. Este es el valor predeterminado. | Probar » |
| shape | Recorta un elemento. El único valor válido es rect(top, right, bottom, left). | Probar » |
| initial | Hace que la propiedad use su valor predeterminado. | Probar » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cuál es la función de la propiedad 'clip' en CSS?