In this blog, we will discuss the Clip property in CSS. Here we take the 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: