Post
Ask Question

Clip property in CSS

Introduction

 
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:
  1. <html>  
  2.   
  3.     <body>  
  4.         <div style="position:absolute;top:0;left:50;  
  5.     clip:rect(10px, auto, auto, auto)">  
  6.             <img src="1.jpg" width="70px" height="70px" />  
  7.         </div>  
  8.         <div style="position:absolute;top:0;left:150;  
  9.     clip:rect(auto, 45px, auto, auto)">  
  10.             <img src="1.jpg" width="70px" height="70px" />  
  11.         </div>  
  12.         <div style="position:absolute;top:0;left:250;  
  13.     clip:rect( auto, auto, auto,10px)">  
  14.             <img src="1.jpg" width="70px" height="70px" />  
  15.         </div>  
  16.     </body>  
  17.   
  18. </html> 
1.png
 
and now we look an example of circle in place of rectangle:
  1. <html>  
  2.   
  3.     <body>  
  4.         <div style="position:absolute;top:0;left:50;  
  5.     clip:circle(10px, auto, auto, auto)">  
  6.             <img src="1.jpg" width="70px" height="70px" />  
  7.         </div>  
  8.     </body>  
  9.   
  10. </html> 
The output Will be:
 
2.png
Next Recommended Reading empty-cells property in CSS