La propriété clip permet le rectangle de couper un élément positionné. Le rectangle est spécifié comme en tant que quatres coordonnées: top, right, bottom, left. Les valeurs top et bottom spécifient des décalages depuis le bord intérieur supérieur de la boîte, tandis que les valeurs de right et left spécifient des décalages depuis le bord intérieur droit de la boîte. Tous les quatres côtés peuvent être length ou auto. "Auto" est la valeur initiale.
clip: auto | shape | initial | inherit;
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
img {
position: absolute;
clip: auto;
}
</style>
</head>
<body>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png">
</body>
</html>
Dans l'exemple suivant, le rectangle coupe l'image par rapport aux valeurs définies.
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
img {
position: absolute;
clip: rect(0px,70px,200px,0px);
}
</style>
</head>
<body>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png">
</body>
</html>
