CSS Clip
CSS Clip
The Clip property in CSS describes the element’s visible area. It applies over the elements which are absolutely positioned (position: absolute ;). Generally, it is used when an image is more significant than the existing element.
It permits us to portray a rectangle described as any four coordinates to clip the element, which is absolutely positioned.
Syntax:
clip: auto | shape | initial | inherit;
Property values
auto: This property value is used as a default value, which displays the elements as they are. Using this value, no clipping will be defined.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.auto
{
position: absolute;
width: 400px;
height: 400px;
clip: auto;
}
</style>
</head>
<body>
<h2> clip: auto; attribute </h2>
<img src= "Flower3.png" class= "auto">
</body>
</html>
Output:
Shape: This property value is applied for clipping the elements. Any element’s defined area can be clipped using this value. Its authentic value is like this-rect(top, right, bottom, left);
Example:
<!DOCTYPE html>
<html>
<head>
<style type= "text/css">
div
{
background: url(flower3.png);
clip: rect(0px, 150px, 250px, 0px);
border:3px solid red;
height:200px;
width: 250px;
position: absolute;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Output:
