clip: rect() hides unwanted part of element - something like visibility: hidden for part of element,
clip property works with position: absolute and position: fixed properties, so it is necessary to use too,
after clipping it is necessary set position of clipped element,
container element (if is used) should have position: relative, position: sticky, position: absolute or position: fixed properties because of clipped element position property.

Main concept of how clip property cutting has been described below:

clip: rect() style property explanation.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    body {
    	position: relative;
        border: 1px solid black;
        height: 150px;
    }

    .oryginal-image {
    	width:  150px;
      	height: 150px;
    }
    
    .cropped-image {
        position: absolute; /* required property for clip */
        left: 150px;
        width:  150px;
      	height: 150px;
      
        /* edges:  top_edge,  right_edge,  bottom_edge,  left_edge */
        clip: rect(65px,      142px,       142px,        36px);
    }

  </style>
</head>
<body>
  <img class="oryginal-image" 
       src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />
  <img class="cropped-image" 
       src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />
</body>
</html>

Used resources:

CSS - clip: rect() style property example

Native Advertising

🚀

Dirask - friendly IT community for everyone.

❤️💻 🙂