Índice

Recortar una caja

Esta propiedad clip determina la parte visible del elemento, generalmente una imagen. De este modo, la imagen entera se incluirá en el documento, aunque solamente una parte (rectangular) de ella estará visible.

clip:

rect(sup_izquierda sup_derecha inf_derecha inf_izquierda);

auto;

images/21RI10.png

Por ejemplo:

clip: rect(10px 270px 190p 50px);

Comentarios

  • Las coordenadas del rectángulo recortado vienen dadas por las esquinas superior izquierda, superior derecha, inferior derecha e inferior izquierda respecto de la imagen inicial.

  • Se recomienda incluir el elemento que se quiere recortar dentro de una etiqueta <div> o <span>.

  • Esta propiedad solamente funciona con un posicionamiento absoluto del elemento.

De momento solo está implementada la forma rectangular.

Ejemplo

<!DOCTYPE html> 
<html lang="es"> 
<head> 
<title>Html5</title> 
<meta charset="UTF-8">  
<style type="text/css"> 
.recorte { position: absolute; 
           clip: rect(0px 50px 115px 0px);}  
</style> 
</head> 
<body> 
<p></p> 
<div class="recorte"> 
<img src="cup.png"> 
</div> 
</body> 
</html>
images/CAP19IMG08.png