Blog

Clip property in CSS

By Mahak Gupta Blogs | JavaScript Aug 26, 2012
In this blog, we will discuss the 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
COMMENT USING

PREMIUM SPONSORS

Hire Mobile & Web Developer on demand. 100% satisfaction. Try for 1 week or Money Back. Local and remote developers available all over USA.

Latest Blogs