Clip property in CSS

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>

1.png


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:

2.png
Ebook Download
View all
Learn
View all