Blog

Clip property in CSS

By Mahak Gupta Aug 26 2012
In this blog, we will discuss the Clip property in CSS.
    • Like
    • Love It
    • Awesome
    • Interesting
    • It's Okay
    • Thumbs Down
  • 3.1k
  • 0
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