In this blog I have mentioned the CSS3’s Clip property. Clip property is used to split the image and text with the help of rect method. if an image is larger than its containing element - The clip property let you specify the scope of an absolutely positioned element that should be visible, and the element is clipped into this shape, and displayed.
Syntax:
rect(Top, Right, Bottom, Left)
<!DOCTYPE html>
<html>
<head>
<style>
p
{
position:absolute;
clip:rect(0px,100px,60px,0px);
}
img
{
position:absolute;
clip:rect(0px,60px,60px,0px);
}
</style>
</head>
<body>
<p>12345678910MindStick</p><br/><br/>
<img src="images.jpg" width="100" height="100" />
</body>
</html>
Output:
Leave a Comment