Die CSS-Eigenschaft clip ermöglicht es einem Rechteck, ein positioniertes Element zu schneiden. Das Rechteck wird als vier Koordinaten angegeben: oben, rechts, unten, links. Die Werte von oben und unten geben Offsets vom inneren oberen Rand des Rahmens an, während die Werte von rechts und links Offsets vom inneren linken Rand des Rahmens angeben. Alle vier Seiten können entweder den Wert auto oder shape haben. "Auto" ist der Standardwert.
clip: auto | shape | initial | inherit;
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
img {
position: absolute;
clip: auto;
}
</style>
</head>
<body>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png">
</body>
</html>
Im folgenden Beispiel schneidet das Rechteck das Bild entsprechend den eingestellten Werten ein.
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</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>
