In this blog, we will discuss the Clip property in CSS. Here we take Same Image three times and now we apply the clip property on the image like this:<html>
<body>
<div style="position:absolute;top:0;left:50;
clip:rect(10px, auto, auto, auto)">
<img src="1.jpg" width="70px" height="70px"/>
</div>
<div style="position:absolute;top:0;left:150;
clip:rect(auto, 45px, auto, auto)">
<img src="1.jpg" width="70px" height="70px"/>
</div>
<div style="position:absolute;top:0;left:250;
clip:rect( auto, auto, auto,10px)">
<img src="1.jpg" width="70px" height="70px"/>
</div>
</body>
</html>
and now we look an example of circle in place of rectangle:
<html>
<body>
<div style="position:absolute;top:0;left:50;
clip:circle(10px, auto, auto, auto)">
<img src="1.jpg" width="70px" height="70px"/>
</div>
</body>
</html>
The output Will be: