CSS Clip
CSS is all about presentation. Discover how CSS Clip works to transform plain HTML into a premium user experience in the guide below.
This CSS attribute defines the visible region of an element and is relevant to elements positioned absolutely with position: absolute;. Typically employed when the image exceeds the dimensions of its container.
It enables us to specify a rectangular area using four coordinates to clip an element that is positioned absolutely.
Syntax
clip: auto | shape | initial | inherit;
Possible values
auto: This is the default setting that displays the element in its original size without any clipping.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.auto {
position: absolute;
width: 400px;
height: 400px;
clip: auto;
}
</style>
</head>
<body>
<h2>clip: auto; property</h2>
<img src= "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" class="auto">
</body>
</html>
The shape property is utilized to trim an element, restricting it to a specified area. This property defines the region that will be visible. It accepts a valid value in the format rect(top, right, bottom, left).
Example
<html>
<head>
<style type = "text/css">
div {
background: url(jtp.png);
clip: rect(0px, 150px, 250px, 0px);
border:3px solid red;
height:200px;
width: 250px;
position: absolute;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
