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: